d3ラスタ+機能のラベル付きベクトル

Question

私はMike Bostockのd3v4 raster+vector iv exampleを見てきましたが、同様の機能をラベルに付けたいと思います。

私は彼の例では

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

のようなコード例で、documentationではなく、一つの大きな一つでマーカーのための個々のパスを使用するように言いましたこれは大文字を描画しますが、適切に座標を表示しているにもかかわらず、それらはすべてsvgの左上隅に束ねます。また、それはzoomed機能にないので、正しくズームするつもりはありませんが、そこにappendを置くと、全く表示されません。

私は首都を正しく表示したいので、まだラベルを貼ることはできませんでした。私はtext要素を追加すると、表示が正しくなると簡単になります。

Answer 1

本当に近いです。その後

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

：

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

次にデータを追加して、パスを選択するベクトルを切り替える：まず、gので、私たちはグループのすべてのパスができるようにvectorの初期宣言を変更ズームは同じままです。

ここにはcode runningです。