javascript 将状态名称添加到 d3.js 中的地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13897534/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add names of the states to a map in d3.js
提问by ashwnacharya
I am using albersUSA projection to display a map. I want to add the name of the states to each state.
我正在使用 albersUSA 投影来显示地图。我想为每个州添加州名。
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];
});
});
}
回答by ashwnacharya
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');
});
}
回答by jfren484
I took a similar approach to the answer you provided yourself, but I didn't like where "centroid" put all of the state names. Hawaii, Louisiana, Michigan, and Florida, for instance. So I added properties to the json data for the state info for dx and dy for those states, and added code to the drawing function.
我对您自己提供的答案采取了类似的方法，但我不喜欢“质心”放置所有州名称的位置。例如夏威夷、路易斯安那、密歇根和佛罗里达。因此，我为 dx 和 dy 的状态信息的 json 数据添加了属性，并为绘图功能添加了代码。
Here's an example of some of the modified states (with the coordinates removed to keep it smaller):
这是一些修改状态的示例（删除了坐标以使其更小）：
{
"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" }
},
And here is the portion of the function that draws the labels:
这是绘制标签的函数部分：
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; });
