如何在d3.js中的每个状态中添加标签(albersUsa)

Question

us.json已加载，但当我尝试添加标签名称时，无法使其工作。我在.json文件中没有看到name属性，所以我如何添加每个状态名称？我对这个框架真的很陌生。

我在谷歌和Stackoverflow上尝试了不同的教程，但都不适合我。这是我尝试过的情侣教程的链接，我认为这是值得的。

• 在d3.js中将各州的名称添加到地图中
• TopoJSON中的州/县名称还是返回GeoJSON

我关心的问题：

1. 我想我在us.json文件中缺少name属性。（如果是这样的话，是否还有其他包含状态名的.json文件？以及如何在该文件中使用状态名？）
2. 美国州名是否包含在http://d3js.org/topojson.v1.min.js中

.html文件（框架加载）

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

.js文件：

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

提前感谢大家。如果你告诉我你在哪里学的d3.js.

Answer 1

正如您所说，您的us.json中没有状态名称。不过，它有唯一的ID，幸运的是，Bostock先生已将这些ID映射到此处的名称。

所以，让我们稍微修正一下这个代码。

首先，使json请求提取数据：

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

现在添加我们的可视化：

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

下面是一个工作示例。