将状态名称添加到 d3.js 中的地图 [英] Add names of the states to a map in d3.js
本文介绍了将状态名称添加到 d3.js 中的地图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 albersUSA 投影来显示地图.我想为每个州添加州名.
I am using albersUSA projection to display a map. I want to add the name of the states to each state.
这是我尝试过的,我可以在源中看到状态的名称,但我没有看到它们被渲染.我做错了什么?
This is what I tried, and i can see the names of the states in the source, but I don't see them rendered. What am i doing wrong?
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];
});
});
}
推荐答案
对于任何想知道的人来说,这就是我设法做到的:
OK for anyone wondering, this is how I managed to do it:
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');
});
}
这篇关于将状态名称添加到 d3.js 中的地图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文