d3 रेखापुंज+वेक्टर सुविधाओं पर लेबल के साथ

मैं माइक बोस्टॉक का d3v4 raster+vector iv उदाहरण देख रहा हूं और मैं बनाना चाहता हूं कुछ समान लेकिन सुविधाओं पर लेबल के साथ।

मैंने पाया कि दस्तावेज़ीकरण के लिए अलग-अलग पथों का उपयोग करने के लिए कह रहा है एक बड़े के बजाय मार्कर, इस तरह के उदाहरण कोड के साथ

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

जो मुझे लगता है कि उनके उदाहरण में कुछ ऐसा दिखाई देगा

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 के ऊपरी बाएँ कोने में जमा होते हैं। चूंकि यह zoomed फ़ंक्शन में नहीं है, इसलिए वे सही ढंग से ज़ूम नहीं करने जा रहे हैं (मुझे लगता है) लेकिन अगर मैं वहां एपेंड डालता हूं, तो वे बिल्कुल प्रदर्शित नहीं होते हैं।

मैं अभी तक लेबल लगाने के लिए तैयार नहीं हुआ हूं क्योंकि मैं चाहता हूं कि राजधानियां पहले ठीक से प्रदर्शित हों, मुझे लगता है कि एक text तत्व जोड़ना आसान हो जाएगा जब मैं प्रदर्शन सही हो जाऊंगा।