Javascript 正确访问d3地图标签的指定json坐标

提供具有以下结构的外部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 ] ... ] ] ] } } ...

我能够渲染贴图并使用data.csv中的值对其进行着色，但无法附加贴图标签并使其显示在脚本末尾的底部

<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.logjsonStateCoords并查看它们。为什么我无法访问返回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];
    })

相关问题：

区块：

此处的测试代码： var宽度=800； var高度=460； var投影=d3.geo.Albersua .平移[宽度/2，高度/2] .比例尺[1000]； var path=d3.geo.path .投射投射； var color=d3.scale.linear .范围[rgb255,90,95，rgb84,36,55，rgb0,80160]； var svg=d3.selectbody .appendsvg 类，地图 .宽度，宽度 .身高，身高 .对齐，居中； d3。csvhttps://cors-anywhere.herokuapp.com/https://gist.githubusercontent.com/radaatyr/313875565a6af5832473625157bd8d40/raw/bc0edee1910034bcc72aac82de659883e6a91f45/postus.json，函数数据{ 色域[1,2,3]； d3。jsonhttps://gist.githubusercontent.com/radaatyr/0e5fcda67ff33afb92b505c5af16d779/raw/bce351a66607ae2c9215a7919981b840c9bb4ddf/us-states.json，functionjson{ 对于变量i=0；i是的，同样的结果你能创建一个功能性的提琴或片段吗？所以我们可以帮助你，你想在地图上添加州标签文本吗？是的，这是最后一个。我想添加到svg