Cách thêm Nhãn cho mỗi trạng thái trong d3.js (albersUsa)?

Question

Đã tải us.json, nhưng khi tôi cố gắng thêm tên nhãn tôi không thể làm cho nó hoạt động. Tôi không thấy thuộc tính tên trong tệp .json để tôi có thể thêm mỗi tên tiểu bang bằng cách nào? Tôi thực sự mới trong khuôn khổ này.

Tôi thử Hướng dẫn khác nhau trên Google và Stackoverflow, nhưng không có hướng dẫn nào phù hợp với tôi. Đây là liên kết để hướng dẫn vài tôi đã cố gắng, mà tôi nghĩ là xứng đáng.

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

Các mối quan tâm tôi có:

1. Tôi nghĩ rằng tôi là thiếu tài sản tên trong tập tin us.json. (nếu đó là vấn đề, có bất kỳ tệp .json nào khác bao gồm tên tiểu bang không? Và cách sử dụng tên tiểu bang với tệp đó?)
2. Tên tiểu bang Hoa Kỳ có bao gồm trong http://d3js.org/topojson.v1.min.js không?

.html Tệp (Khung 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); 
}); 

Cảm ơn bạn tất cả mọi người ở cao cấp. Tôi cũng đánh giá cao nếu bạn cho tôi biết nơi bạn đã học d3.js.

Answer 1

Như bạn đã nêu, us.json không có tên tiểu bang trong đó. Những gì nó có, mặc dù, là id duy nhất và may mắn, ông Bostock đã ánh xạ những id đến tên here.

Vì vậy, hãy sửa mã này một chút.

Thứ nhất, làm cho json yêu cầu để kéo dữ liệu:

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

Bây giờ thêm hình dung của chúng tôi:

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

    .... 

Dưới đây là một example làm việc.