기존 요소 위에 SVG 항목 추가

Question

d3.js 라이브러리를 사용하여지도에 점을 추가하려고합니다. (이 스크립트는이 gist에서 수정하려고했습니다.)

문제는 맵이 점 위에 렌더링된다는 것입니다. 다음과 같이 제안한 다른 답변을 사용하려고했습니다 : svg.append("g").attr("id", "map").attr("id", "points") ...하지만 작동시키지 못했습니다. 저는 오랫동안 파이썬 사용자였습니다 ... JavaScript는 새로운 것입니다. (순진한 말로 변명하십시오).

다음 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> 

:

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

---

: this에 따라 SO 대답 대답에서

<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); 

---

가이 추가

 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이 비동기 기능입니다. 콜백이 발생하는 순서는 지정되지 않았으며 CSV 파일이 작기 때문에 콜백이 먼저 실행되는 것입니다. 즉, 귀하의 CSV 콜백에서 svg.append("g")이 보다 앞에 있고, svg.append("g")이 json 콜백에 있음을 의미합니다. DOM을 검사하고 어느 것이 먼저 추가되었는지 확인할 수 있습니다.

그렇다면 d3.queue을 사용하면됩니다. 이렇게하면 d3.json과 d3.csv 비동기 요청을 모두 해제 한 다음 두 가지 모두를 사용하여 단일 콜백을 시작할 수 있습니다.

콜의 콜백에 d3.csv 코드를 삽입하는 것이 더 간단합니다.