D3.js'de (albersUsa) her bir duruma nasıl etiket eklenir?

Question

us.json yüklendi, ancak Etiket adı eklemeye çalıştığımda, çalışamam. İsim özelliğini .json dosyasında göremiyorum, bu yüzden her eyalet adını nasıl ekleyebilirim? Bu çerçeveye gerçekten yeniyim.

Google ve Stackoverflow'ta farklı Eğitim'i deniyorum, ancak bunların hiçbiri benim için çalışmıyor. İşte denedim çift öğretici bağlantı, bu layık olduğunu düşünüyorum.

State/County names in TopoJSON or go back GeoJSON?

Ben endişeleri

Add names of the states to a map in d3.js

:
1. ben us.json dosyasında adı mülkü eksik düşünüyorum. (sorun buysa, eyalet adını içeren başka bir .json dosyası var mı? Ve bu dosyayla durum adını nasıl kullanabiliriz?)
2. ABD durum adı http://d3js.org/topojson.v1.min.js içeriyor mu?

.html Dosyası (Loaded Çerçeve)

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

.js Dosya:

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

gelişmiş herkese teşekkür ederim. Ayrıca d3.js.'ı nerede öğrendiğinizi söylerseniz minnettarım.

Answer 1

Sizin belirttiğiniz gibi us.json'inizde bunun için bir alan adı bulunmamaktadır. Bununla birlikte, sahip olduğu benzersiz kimlikler ve neyse ki, Bay Bostock bu kimlikleri here isimlerine eşleştirdi.

Bu kodu biraz düzeltelim.

Birincisi, json istekleri veri çekme olun:

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

Şimdi görselleştirme ekleyin:

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

    .... 

İşte çalışan example bu.