Aggiungi nomi degli stati a una mappa in d3.js

Sto usando la proiezione di albersUSA per visualizzare una mappa. Voglio aggiungere il nome degli stati a ciascuno stato.

Questo è quello che ho provato, e posso vedere i nomi degli stati nella sorgente, ma non li vedo resi. Che cosa sto facendo di sbagliato?

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

OK per chiunque si chieda, questo è il modo in cui sono riuscito a farlo:

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

Ho adottato un approccio simile alla risposta che hai fornito tu stesso, ma non mi piaceva dove “centroid” mettesse tutti i nomi di stato. Hawaii, Louisiana, Michigan e Florida, ad esempio. Così ho aggiunto proprietà ai dati JSON per le informazioni di stato per dx e dy per quegli stati e aggiunto codice alla funzione di disegno.

Ecco un esempio di alcuni degli stati modificati (con le coordinate rimosse per tenerlo più piccolo):

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

Ed ecco la parte della funzione che disegna le etichette:

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