d3.js

Question

में मानचित्र में राज्यों के नाम जोड़ें I मानचित्र प्रदर्शित करने के लिए albersUSA प्रक्षेपण का उपयोग कर रहा हूं। मैं प्रत्येक राज्य में राज्यों का नाम जोड़ना चाहता हूं।

यही मैंने कोशिश की है, और मैं स्रोत में राज्यों के नाम देख सकता हूं, लेकिन मुझे उन्हें प्रस्तुत नहीं किया जाता है। मैं क्या गलत कर रहा हूँ?

var width = 1060, 
height = 600, 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

svg.append("rect") 
    .attr("class", "background") 
    .attr("width", width) 
    .attr("height", height) 
    .on("click", click) 
    .on("mousemove", mousemove); 

var g = svg.append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")") 
    .append("g") 
    .attr("id", "states"); 

var projection = d3.geo.albersUsa() 
    .scale(width) 
    .translate([0, 100]); 

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

draw(); 

function draw(){ 

    d3.json("readme.json", function(json) { 
    g.selectAll("path") 
    .data(json.features) 
    .enter() 
    .append("path") 
    .attr("d", path) 
    .append("svg:text") 
    .text(function(d){ 
     return d.properties.name; 
    }) 
    .attr("x", function(d){ 
     return -path.centroid(d)[0]; 
    }) 
    .attr("y", function(d){ 
     return -path.centroid(d)[1]; 
    }); 

    }); 
} 

Answer 1

सोच किसी के लिए ठीक है, यह कैसे मैं यह कर में कामयाब रहे है:

function draw(){ 

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

    g.selectAll("text") 
    .data(json.features) 
    .enter() 
    .append("svg:text") 
    .text(function(d){ 
     return d.properties.name; 
    }) 
    .attr("x", function(d){ 
     return path.centroid(d)[0]; 
    }) 
    .attr("y", function(d){ 
     return path.centroid(d)[1]; 
    }) 
    .attr("text-anchor","middle") 
    .attr('font-size','6pt'); 


    }); 
} 

Answer 2

मैं इस सवाल का जवाब आप अपने आप को प्रदान की लिए एक समान दृष्टिकोण लिया, लेकिन मैं पसंद नहीं आया, जहां "केन्द्रक" सभी राज्य के नाम डाल दिया। उदाहरण के लिए हवाई, लुइसियाना, मिशिगन और फ्लोरिडा। इसलिए मैंने उन राज्यों के लिए डीएक्स और डीई के लिए राज्य की जानकारी के लिए जेसन डेटा में गुण जोड़े और ड्राइंग फ़ंक्शन में कोड जोड़ा।

यहाँ संशोधित राज्यों में से कुछ का एक उदाहरण है (निर्देशांक के साथ हटा दिया इसे छोटा रखने के लिए):

{ 
     "geometry": { "type": "Polygon", "coordinates": [] }, 
     "type": "Feature", 
     "id": "12", 
     "properties": { "name": "Florida", "abbr": "FL", "dx": "1em" } 
    }, 
    { 
     "geometry": { "type": "MultiPolygon", "coordinates": [] }, 
     "type": "Feature", 
     "id": "15", 
     "properties": { "name": "Hawaii", "abbr": "HI", "dx": "1.15em", "dy": "1.25em" } 
    }, 

और यहाँ समारोह वाले हिस्से की लेबल खींचता है:

 g.selectAll("text") 
      .data(json.features) 
      .enter() 
      .append("text") 
      .attr("transform", function (d) { return "translate(" + path.centroid(d) + ")"; }) 
      .attr("dx", function (d) { return d.properties.dx || "0"; }) 
      .attr("dy", function (d) { return d.properties.dy || "0.35em"; }) 
      .text(function (d) { return d.properties.abbr; });