us.json
加载,但当我尝试添加标签名称时,我无法使其工作。我在 .json
文件中没有看到 name 属性,那么如何添加每个州名称?我对这个框架真的很陌生。
我在 Google 和 Stackoverflow 上尝试了不同的教程,但它们都不适合我。这是我尝试过的情侣教程的链接,我认为这是值得的。
我的顾虑:
- 我想我在 us.json 文件中缺少名称属性。 (如果这是问题所在,是否还有任何其他包含州名称的 .json 文件?以及如何在该文件中使用州名称?)
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 的,我也很感激。
最佳答案
正如您所说,您的 us.json
中没有州名。不过,它拥有的是唯一 ID,幸运的是,Bostock 先生已将这些 ID 映射到名称 here .
那么,让我们稍微修改一下这段代码。
首先,发出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');
....
这是一个有效的 example .
关于javascript - 如何在 d3.js (albersUsa) 中为每个状态添加标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28305205/