d3 래스터 + 기능 레이블에 레이블이있는 벡터

Question

저는 Mike Bostock의 d3v4 raster+vector iv example을보고 있었지만 기능상의 레이블과 비슷한 것을 만들고 싶습니다.

나는 documentation 내가

var projection = d3.geoMercator() 
    .scale(1/tau) 
    .translate([0, 0]); 

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

var vector = svg.selectAll("path"); 

d3.csv("us-state-capitals.csv", type, function(error, capitals) { 
    if (error) throw error; 

    vector 
     .data(capitals) 
     .enter() 
     .append("path") 
     .attr("d", d3.geoPath().projection(projection)); 

    // Compute the projected initial center. 
    var center = projection([-98.5, 39.5]); 

    // Apply a zoom transform equivalent to projection.{scale,translate,center}. 
    svg 
     .call(zoom) 
     .call(zoom.transform, d3.zoomIdentity 
      .translate(width/2, height/2) 
      .scale(1 << 12) 
      .translate(-center[0], -center[1])); 
}); 

function zoomed() { 
    var transform = d3.event.transform; 

    var tiles = tile 
     .scale(transform.k) 
     .translate([transform.x, transform.y]) 
    (); 

    projection 
     .scale(transform.k/tau) 
     .translate([transform.x, transform.y]); 

같이 보일 것입니다 자신의 예를 생각이

svg.selectAll("path") 
.data(features) 
.enter().append("path") 
.attr("d", d3.geoPath()); 

같은 예제 코드와 함께, 대신에 하나의 큰 하나의 마커에 대한 개별 경로를 사용하는 말 발견 이것은 대문자를 그렸지만 올바르게 투영을 적용하지 않는 것처럼 보입니다. 올바른 좌표를 갖고있는 것처럼 보였지만 svg의 왼쪽 상단 모서리에 묶여있었습니다. 또한 그것은 zoomed 함수에 없으므로 올바르게 확대되지 않을 것입니다. (필자는 생각합니다.) 그러나 거기에 추가를하면 전혀 표시되지 않습니다.

대문자를 제대로 표시하기 위해 레이블을 넣지 않았으므로, 표시를 올바르게하면 text 요소를 추가하는 것이 간단 할 것입니다.

Answer 1

정말 가까이 있습니다.

var vector = svg.append("g"); 

그런 다음 데이터를 추가 및 경로의 선택으로 벡터를 전환 : 첫째, g 그래서 우리가 할 수있는 그룹 모든 경로로 vector의 초기 선언을 변경 그런 다음

vector = vector.selectAll("path") 
    .data(capitals) 
    .enter() 
    .append("path"); 

확대/축소는 동일하게 유지됩니다.

여기는 code running입니다.