Thêm tên của các tiểu bang vào bản đồ trong d3.js

Question

Tôi đang sử dụng phép chiếu albersUSA để hiển thị bản đồ. Tôi muốn thêm tên của các tiểu bang cho mỗi tiểu bang.

Đây là những gì tôi đã thử và tôi có thể thấy tên của các trạng thái trong nguồn, nhưng tôi không thấy chúng được hiển thị. Tôi đang làm gì sai?

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

    }); 
} 

Answer 1

OK cho bất cứ ai tự hỏi, đây là cách tôi cố gắng làm điều đó:

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


    }); 
} 

Answer 2

tôi sử dụng phương pháp tương tự như câu trả lời mà bạn cung cấp cho mình, nhưng tôi không thích nơi "trọng tâm" đặt tất cả các tên tiểu bang. Ví dụ: Hawaii, Louisiana, Michigan và Florida. Vì vậy, tôi đã thêm các thuộc tính vào dữ liệu json cho thông tin trạng thái cho dx và dy cho các trạng thái đó và thêm mã vào hàm vẽ.

Dưới đây là một ví dụ về một số các tiểu bang sửa đổi (với các tọa độ loại bỏ để giữ cho nó nhỏ hơn):

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

Và đây là một phần của chức năng thu hút các nhãn:

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