d3.js지도에서 포인트가 다른 기능 뒤에 숨겨져 있습니다.

Question

일부 포인트가있는 인도지도를 만들려고했습니다. 나는 코드베이스를 따랐다 from here.

포인트를 제외한 모든 것이 괜찮습니다. 지도의 다른 기능 뒤에 숨겨져 있기 때문에 표시되지 않습니다. 포인트가 보이도록 피쳐를 겹치게하려면 어떻게해야합니까?

Answer 1

d3.js에서지도 레이어는 두 가지 방법으로 처리 할 수 ​​있습니다. 이 코드이면 (검색 예에서 부연)

d3.json("path.json",function (json) { 
     g.selectAll("path") 
      .data(json.features) 
      .enter().append("path") 
      .attr("d", path); 
    }); 

    d3.csv("path.csv",function (csv) { 
     g.selectAll("circle") 
      .data(csv) 
      .enter().append("circle") 
      .attr("cx", function(d) { projection([d.x,d.y])[0] }) 
      .attr("cy", function(d) { projection([d.x,d.y])[1] }) 
      .attr("r",4); 
    }); 

데이터는 콜백 기능이 완료되는 순서에 기초하여, 'g'요소에 추가되고, 그래서이 CSV 데이터가 될 가능성이고 먼저 json 데이터가 그려집니다. 여기 소개합니다

---

첫 번째 방법은 (내 마음 속에) 데이터 레이어 순서를 지정하는 대부분의 상황에서 가장 깨끗한 방법입니다. SVG 'g'요소는 지정된 순서대로 추가됩니다. 이 데이터의 레이어링을 통해 당신에게 쉽게 제어 할 수 있습니다 :

var gBackground = svg.append("g"); // appended first 
var gDataPoints = svg.append("g"); // appended second 
// ... and so forth 

를 그리고, 당신이 할 일은하는 'g'요소/계층에서 데이터가 삽입/추가됩니다 지정할 수 있습니다. 그래서, 당신의 코드가 보일 것 같이 더 많은 :

d3.json("path.json",function (json) { 
     gBackground.selectAll("path") 
      .data(json.features) 
      .enter().append("path") 
      .attr("d", path); 
    }); 

    d3.csv("path.csv",function (csv) { 
     gDataPoints.selectAll("circle") 
      .data(csv) 
      .enter().append("circle") 
      .attr("cx", function(d) { projection([d.x,d.y])[0] }) 
      .attr("cy", function(d) { projection([d.x,d.y])[1] }) 
      .attr("r",4); 
    }); 

---

두 번째 옵션은 같은 'g'요소에 데이터를 추가 만에 두 번째 레이어를 그림으로써이가, 제어 수행되는 순서를 보장 첫 번째 후, 첫 번째립니다 콜백 함수가 그려집니다 :

우리가 같은 것으로 코드를 수정 것이이 방법으로 데이터의 순서를 제어하려면 :

d3.json("path.json",function (json) { 
     g.selectAll("path") 
      .data(json.features) 
      .enter().append("path") 
      .attr("d", path); 

     // once the json is drawn, draw the csv: 
     d3.csv("path.csv",function (csv) { 
      g.selectAll("circle") 
       .data(csv) 
       .enter().append("circle") 
       .attr("cx", function(d) { projection([d.x,d.y])[0] }) 
       .attr("cy", function(d) { projection([d.x,d.y])[1] }) 
       .attr("r",4); 
     }); 
    });