Dodawanie nazw stanów do mapy w d3.js

Question

Używam projekcji albersUSA do wyświetlania mapy. Chcę dodać nazwę stanów do każdego stanu.

Oto, co próbowałem i widzę nazwy stanów w źródle, ale nie widzę ich renderowanych. Co robię źle?

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

OK dla każdego, zastanawiając się, to jak udało mi się to zrobić:

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

wziąłem podobne podejście do odpowiedzi podany siebie, ale mi się nie podoba, gdzie „środek ciężkości” wstaw wszystkie nazwy stanów. Na przykład Hawaje, Luizjana, Michigan i Floryda. Więc dodałem właściwości do danych json dla informacji o stanie dla dx i dy dla tych stanów i dodałem kod do funkcji rysowania.

Oto przykład niektórych zmienionych stanów (z usuniętymi współrzędne zachować to mniejszy):

{ 
     "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" } 
    }, 

A oto część funkcji, która zwraca etykiet:

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