मैं माइक बोस्टॉक का 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 तत्व जोड़ना आसान हो जाएगा जब मैं प्रदर्शन सही हो जाऊंगा।

1
Charles Bandes 20 जिंदा 2017, 20:15

1 उत्तर

सबसे बढ़िया उत्तर

तुम सच में करीब हो। सबसे पहले, vector की प्रारंभिक घोषणा को g में बदलें ताकि हम सभी पथों को समूहीकृत कर सकें:

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

फिर पथों का चयन करने के लिए डेटा जोड़ें और वेक्टर स्विच करें:

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

फिर ज़ूम वही रहता है।

यह रहा कोड रनिंग

1
Mark 20 जिंदा 2017, 20:28
मुझे अपेक्षा से अधिक लेबल संलग्न करने में परेशानी हो रही है - मैंने सोचा कि यह टेक्स्ट तत्वों के साथ एक और "जी" जितना आसान होगा, लेकिन वे ऊपरी बाएं में भी स्थित हैं।
 – 
Charles Bandes
20 जिंदा 2017, 22:28
1
पथ द्वारा लेबल का अनुवाद करके इसे ठीक किया गया।सेंट्रोइड (डी)
 – 
Charles Bandes
20 जिंदा 2017, 22:46