既存の要素の上にSVGアイテムを追加する

Question

d3.jsライブラリを使用して、マップにポイントを追加しようとしています。 （私はこのgistからスクリプトを適用しようとしました）。

問題はマップがドットの上にレンダリングされていることです。 私はこのようなものを示唆した別の答えを使用しようとしました： svg.append("g").attr("id", "map").attr("id", "points") ...しかし、私はそれを動作させることができませんでした。私は長い時間Pythonのユーザーです... JavaScriptは私のために新しいです（したがって、naiveを言い訳してください）。

次のCSSを使用しています：

<style> 
    body { 
     background-color: white; 
    } 
    svg { 
     border: 1px solid black; 
     background-color: #a4bac7; 
    } 
     .land { 
      fill: #d7c7ad; 
      stroke: #8999ab; 
     } 
     .boundary { 
      fill: none; 
      stroke: #a5967f; 
     } 
    </style> 

ボディ：thisに対応して

<script type="text/javascript" src="d3/d3.js"></script> 
    <script src="http://d3js.org/topojson.v0.min.js"></script> 

    <script> 
     var width = 960; 
     var height = 480; 
     var dataURL = "https://gist.githubusercontent.com/abenrob/787723ca91772591b47e/raw/8a7f176072d508218e120773943b595c998991be/world-50m.json"; 

     var svg = d3.select("body").append("svg") 
      .attr("width", width) 
      .attr("height", height); 

---

SOの答えを答える、この追加された：

 svg.append("g") 
       .attr("id", "map") 
       .attr("id", "points"); 

---

を

 var projection = d3.geoEquirectangular() 
      .scale(153) 
      .translate([width/2,height/2]) 

     var path = d3.geoPath() 
      .projection(projection); 

     d3.json(dataURL, function(error, world) { 
      svg.append("g") 
       .select("#map").selectAll(".map") 
       .attr("class", "land") 
       .selectAll("path") 
       .data([topojson.object(world, world.objects.land)]) 
       .enter().append("path") 
       .attr("d", path); 
      svg.append("g") 
       .select("#map").selectAll(".map") 
       .attr("class", "boundary") 
       .selectAll("boundary") 
       .data([topojson.object(world, world.objects.countries)]) 
       .enter().append("path") 
       .attr("d", path); 
      } 
     ); 

     var lngLatExtract = function(d, i){ 
      return projection([d['lng'], d['lat']])[i]; 
     }; 

     d3.csv("cities.csv", function(data){ 
       svg.append("g") 
         .select("#points").selectAll(".points") 
         .data(data) 
         .enter() 
          .append('circle') 
          .attr("cx", function(d){ 
           return lngLatExtract(d, 0); 
          }) 
          .attr('cy', function(d){ 
           return lngLatExtract(d, 1); 
          }) 
          .style("fill", "blue") 
          .style("opacity", 0.75) 
          .attr("r", function(d){ 
           return Math.sqrt(parseInt(d['population']) * 0.000001) 
          }); 
       } 
     ); 

    </script> 

cities.csv次のようになります。

rank,place,population,lat,lng 
1,New York city,8175133,40.71455,-74.007124 
2,Los Angeles city,3792621,34.05349,-118.245323 

Answer 1

両方d3.jsonとd3.csvは非同期関数です。コールバックが発生する順序は指定されていません.CSSファイルが小さいため、コールバックが最初に起動している可能性があります。つまり、あなたのCSVコールバックのsvg.append("g")がの前に起きています。これは、の前にjsonコールバックのsvg.append("g")です。これを確認するには、DOMを調べて、最初に追加されたものを確認します。

つまり、私はd3.queueを使用するように切り替えます。これにより、d3.jsonとd3.csvの両方の非同期要求を起動し、両方で完了した単一のコールバックを起動できます。

コールのコールバックにd3.csvコードを配置する方法が簡素化されています。