Jak dodać etykietę do każdego stanu w pliku d3.js (albersUsa)?

Question

Załadowano kod us.json, ale gdy próbuję dodać nazwę etykiety, nie można jej uruchomić. Nie widzę właściwości nazwy w pliku .json, więc jak mogę dodać nazwę każdego stanu? Jestem naprawdę nowy w tej strukturze.

Próbuję różnych tutoriali w Google i Stackoverflow, ale żaden z nich nie działa dla mnie. Oto link do paru tutoriala, który wypróbowałem, który uważam za warty.

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

obawy mam:

1. Chyba brakuje właściwości name w pliku us.json. (jeśli to jest problem, czy istnieje inny plik .json zawierający nazwę stanu i jak używać nazwy stanu z tym plikiem?)
2. Czy nazwa stanu USA jest zawarta w http://d3js.org/topojson.v1.min.js?

.html plików (ramowa 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 Plik:

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

Dziękuję wszystkim w zaawansowanych. Doceniam również, jeśli powiesz mi, gdzie nauczyłeś się d3.js.

Answer 1

Jak podano, twoje us.json nie ma w nim nazw stanów. To, co ma, jest unikatowe i szczęśliwie, pan Bostock zmapował te identyfikatory na nazwy here.

Naprawmy ten kod.

Po pierwsze, upewnij się json wnioski wyciągnąć dane:

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

Teraz dodaj naszą wizualizację:

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

    .... 

Oto pracuje example.