如何在d3.js（albersUsa）中为每个州添加Label？ [英] How to add Label to each state in d3.js (albersUsa)?

问题描述

us.json 已加载，但是当我尝试添加Label名称时，我无法使其正常工作。我没有在 .json 文件中看到name属性，那么如何添加每个州名？我对这个框架很陌生。

The us.json loaded, but when i try to add Label name i can't make it work. I don't see the name property in .json file so how can i add each state name? I'm really new to this framework.

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

I try different Tutorial on Google and Stackoverflow, but none of them work for me. Here is the link to couple tutorial i tried, that i think is worthy.

• 将状态名称添加到d3.js中的地图


• TopoJSON中的州/郡名称或返回GeoJSON？

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

我担心的问题：

1. 我想我在us.json文件中缺少name属性。 （如果这是问题，是否有任何其他.json文件包含州名？如何使用该文件的州名？）


2. 美国州名是否包括在 http://d3js.org/topojson.v1.min.js ？

1. I think I'm missing name property in us.json file. (if that's the issue, is there any other .json file that includes state name? And how to use the state name with that file?)
2. Is the US state name included in 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我也很感激。

Thank you everyone in advanced. I also appreciate if you tell me where did you learn d3.js.

推荐答案

正如你所说的 us.json 中没有州名。然而，它拥有独特的ID，幸运的是，Bostock先生已将这些ID映射到名称这里。

As you stated your us.json doesn't have state names in it. What it has, though, are unique ids and luckily, Mr. Bostock has mapped those ids to names here.

所以，让我们稍微修改一下这段代码。

So, let's fix up this code a bit.

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

First, make the json requests to pull the data:

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

现在添加我们的可视化：

Now add our visualization:

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

  ....

这是一个有效的示例。

这篇关于如何在d3.js（albersUsa）中为每个州添加Label？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！