给出一个具有以下结构的外部 json 文件“us-states.json”:
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "GEO_ID": "0400000US23", "STATE": "23", "NAME": "Maine", "LSAD": "", "CENSUSAREA": 30842.923000 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -67.619761, 44.519754 ], [ -67.615410, 44.521973 ], [ -67.587738, 44.516196 ] ... ] ] ] } } ...
我能够渲染 map 并使用 data.csv 中的值为其着色,但无法附加 map 标签并让它们出现(位于底部脚本的最末尾)。
<script type="text/javascript">
var width = 800;
var height = 460;
var projection = d3.geo.albersUsa()
.translate([width/2, height/2])
.scale([1000]);
var path = d3.geo.path()
.projection(projection);
var color = d3.scale.linear()
.range(["rgb(255,90,95)","rgb(84,36,55)","rgb(0,80,160)"]);
var svg = d3.select("body")
.append("svg")
.attr("class","map")
.attr("width", width)
.attr("height", height)
.attr("align","center");
d3.csv("data.csv", function(data) {
color.domain([1,2,3]);
d3.json("us-states.json", function(json) {
for (var i = 0; i < data.length; i++) {
var dataState = data[i].state;
var dataValue = data[i].value;
var dataLink = data[i].link;
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.NAME;
var jsonStateCoords = json.features[j].geometry.coordinates
if (dataState == jsonState) {
json.features[j].properties.value = dataValue;
json.features[j].properties.link = dataLink;
json.features[j].properties.coordinates = jsonStateCoords;
break;
}
}
};
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "#fff")
.style("stroke-width", "1")
.style("fill", function(d) {
var value = d.properties.value;
if (value) {
return color(value);
} else {
return "rgb(213,222,217)";
}
})
// part of the script that isn't working
svg.selectAll("text")
.data(json.features)
.enter()
.append("svg:text")
.attr("d", path)
.text(function(d){return d.properties.state; })
.attr("x", function(d){ return d.properties.coordinates[0] })
.attr("y", function(d){ return d.properties.coordinates[1] })
.attr("text-anchor","middle")
.attr('font-size', '13px')
.attr('color', 'white');
});
</script>
我可以console.log(jsonStateCoords)
并查看它们。为什么我无法访问返回 d.properties.coords.x
或 d.properties.coords.y
的字段值?相反,获取 d.properties.coords 是未定义的。谢谢
最佳答案
在状态上添加标签时,您要寻找的是找到状态边界路径的质心。 d3 有一个计算质心的方法。
svg.selectAll("text")
.data(json.features)
.enter()
.append("svg:text")
.attr("text-anchor","middle")
.attr('font-size', '13px')
.attr('fill', 'blue')
.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];
})
相关问题:
How to add Label to each state in d3.js (albersUsa)?
d3.js add a label in the center of a path
block :
http://bl.ocks.org/pgiraud/9f400d54ce2ea7b4f820
http://bl.ocks.org/LuisSevillano/b51c795f7d68aedfb24485fbdb570c3c
在此处测试代码:
var width = 800;
var height = 460;
var projection = d3.geo.albersUsa()
.translate([width/2, height/2])
.scale([1000]);
var path = d3.geo.path()
.projection(projection);
var color = d3.scale.linear()
.range(["rgb(255,90,95)","rgb(84,36,55)","rgb(0,80,160)"]);
var svg = d3.select("body")
.append("svg")
.attr("class","map")
.attr("width", width)
.attr("height", height)
.attr("align","center");
d3.csv("https://cors-anywhere.herokuapp.com/https://gist.githubusercontent.com/radaatyr/313875565a6af5832473625157bd8d40/raw/bc0edee1910034bcc72aac82de659883e6a91f45/postus.json", function(data) {
color.domain([1,2,3]);
d3.json("https://gist.githubusercontent.com/radaatyr/0e5fcda67ff33afb92b505c5af16d779/raw/bce351a66607ae2c9215a7919981b840c9bb4ddf/us-states.json", function(json) {
for (var i = 0; i < data.length; i++) {
var dataState = data[i].state;
var dataValue = data[i].value;
var dataLink = data[i].link;
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.NAME;
var jsonStateCoords = json.features[j].geometry.coordinates
if (dataState == jsonState) {
json.features[j].properties.value = dataValue;
json.features[j].properties.link = dataLink;
json.features[j].properties.coords = jsonStateCoords;
break;
}
}
};
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "#fff")
.style("stroke-width", "1")
.style("fill", function(d) {
var value = d.properties.value;
if (value) {
return color(value);
} else {
return "rgb(213,222,217)";
}
})
// part of the script that isn't working
svg.selectAll("text")
.data(json.features)
.enter()
.append("svg:text")
.attr("text-anchor","middle")
.attr('font-size', '13px')
.attr('fill', 'blue')
.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];
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
关于javascript - 正确访问 d3 map 标签指定的 json 坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53212165/