正确访问为 d3 地图标签分配的 json 坐标

Question

给一个外部 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.log(jsonStateCoords) 看到他们。为什么我无法访问返回d.properties.coords.x 或d.properties.coords.y 的字段值？取而代之的是d.properties.coords is undefined。谢谢

Answer 1

在状态上添加标签时，您要寻找的是找到状态边界路径的质心。 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

方块：

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>