Come aggiungere un'etichetta a ciascuno stato in d3.js (albersUsa)?

Question

Il us.json caricato, ma quando provo ad aggiungere il nome dell'etichetta non riesco a farlo funzionare. Non vedo la proprietà name nel file .json, quindi come posso aggiungere il nome di ogni stato? Sono davvero nuovo in questa struttura.

Provo diversi tutorial su Google e StackOverflow, ma nessuno di loro funziona per me. Ecco il link per un paio di tutorial che ho provato, che penso sia degno.

• Add names of the states to a map in d3.js
• State/County names in TopoJSON or go back GeoJSON?

Le preoccupazioni che ho:

1. penso che mi manca proprietà name nel file di us.json. (se questo è il problema, c'è qualche altro file .json che include il nome dello stato? E come usare il nome dello stato con quel file?)
2. Il nome dello stato degli Stati Uniti è incluso in http://d3js.org/topojson.v1.min.js?

.html File (quadro Loaded)

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script src="http://d3js.org/topojson.v1.min.js"></script> 

.js File:

var width = 1500, 
    height = 1100, 
    centered; 


var usData = ["json/us.json"]; 
var usDataText = ["json/us-states.json"]; 

var projection = d3.geo.albersUsa() 
    .scale(2000) 
    .translate([760, height/2]); 

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

var svg = d3.select("body").append("svg") 
    .style("width", "100%") 
    .style("height", "100%"); 


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

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

d3.json(usData, function(unitedState) { 
    g.append("g") 
    .attr("class", "states-bundle") 
    .selectAll("path") 
    .data(topojson.feature(unitedState, unitedState.objects.states).features) 
    .enter() 
    .append("path") 
    .attr("d", path) 
    .attr("class", "states") 
    .on("click", clicked); 
}); 

Grazie a tutti in anticipo. Apprezzo anche se mi dici dove hai imparato d3.js.

Answer 1

Come hai affermato, il tuo us.json non contiene nomi di stato. Quello che ha, però, sono id unici e, fortunatamente, Bostock ha mappato questi identificativi ai nomi here.

Quindi, risolviamo questo codice un po '.

In primo luogo, fare le json richieste per estrarre i dati:

// path data 
d3.json("us.json", function(unitedState) { 
    var data = topojson.feature(unitedState, unitedState.objects.states).features; 
    // our names 
    d3.tsv("us-state-names.tsv", function(tsv){ 
    // extract just the names and Ids 
    var names = {}; 
    tsv.forEach(function(d,i){ 
     names[d.id] = d.name; 
    }); 

Ora aggiungete la nostra visualizzazione:

// build paths 
g.append("g") 
    .attr("class", "states-bundle") 
    .selectAll("path") 
    .data(data) 
    .enter() 
    .append("path") 
    .attr("d", path) 
    .attr("stroke", "white") 
    .attr("class", "states"); 

// add state names 
g.append("g") 
    .attr("class", "states-names") 
    .selectAll("text") 
    .data(data) 
    .enter() 
    .append("svg:text") 
    .text(function(d){ 
    return names[d.id]; 
    }) 
    .attr("x", function(d){ 
     return path.centroid(d)[0]; 
    }) 
    .attr("y", function(d){ 
     return path.centroid(d)[1]; 
    }) 
    .attr("text-anchor","middle") 
    .attr('fill', 'white'); 

    .... 

Ecco una example lavoro.