如何将状态名称放入地理图表/D3.js答案

【问题标题】：How to put the state name into the Geo chart/D3.js如何将状态名称放入地理图表/D3.js
【发布时间】：2020-09-09 09:54:41
【问题描述】：

我遇到了一个问题，我想将州名放在我的地理图表上。我尝试使用别人的方法，但他们不能很好地匹配我的图表。您能否让我知道我的代码有什么问题以及如何改进它。提前谢谢您！

索引.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="stylemap.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "chart"></div>
    <script src="https://d3js.org/d3.v5.js"></script>
    <script src="mainmap.js"></script>
</body>
</html>

Mainmap.js：

//weight and height
var chart_height = 600;
var chart_width = 800;

var color = d3.scaleQuantize().range([  'rgb(255,245,240)','rgb(254,224,210)','rgb(252,187,161)',
                                        'rgb(252,146,114)','rgb(251,106,74)','rgb(239,59,44)',
                                        'rgb(203,24,29)','rgb(165,15,21)','rgb(103,0,13)']);

//Projection

var projection = d3.geoAlbersUsa()
                    .scale([chart_width])
                    .translate([chart_width / 2, chart_height / 2 ]);
                    // .translate([0, 100]);

var path = d3.geoPath(projection);
            // .projection(projection);


//create svg
var svg = d3.select('#chart')
            .append("svg")
            .attr('width', chart_width)
            .attr('height', chart_height);

// svg.append("rect")
// .attr("class", "background")
// .attr("width", width)
// .attr("height", height);


var g = svg.append("g")
    .attr("transform", "translate(" + chart_width / 2 + "," + chart_height / 2 + ")")
    .append("g")
    .attr("id", "states");

//Data
d3.json('zombie-attacks.json').then(function(zombie_data){
    color.domain([
        d3.min(zombie_data, function(d){
            return d.num;
        }),
        d3.max(zombie_data, function(d){
            return d.num;
        })
    ]);
d3.json('us.json').then(function(us_data){
    us_data.features.forEach(function(us_e, us_i){
        zombie_data.forEach(function(z_e,z_i){
            if(us_e.properties.name !== z_e.state){
                return null;
            }
            us_data.features[us_i].properties.num = parseFloat(z_e.num)
        });
    });
    // console.log(us_data)
    svg.selectAll('path')
        .data(us_data.features)
        .enter()
        .append('path')
        .attr('d',path)
        .attr('fill', function(d){
            var num = d.properties.num;
            return num ? color(num) : '#ddd';
        })

        .text(function(d){
            return d.properties.name;
        })
        .attr('stroke', '#fff')
        .attr('stroke-width',1)
        .attr("class", "country-label")
        .append("text")
        // .attr("transform", function(d) { console.log("d", d); return "translate(" + path.centroid(d) + ")"; })
        // .text(function(d) { return d.properties.name; })
        .attr("dy", function (d) {
            return "0.35em";
        })
        .style('fill', 'black');
    g.selectAll("text")
     .data(us_data.features)
     .enter()
     .append("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')
     .style('fill', 'green');
     })
})

//Add names of the states to a map in d3.js

【问题讨论】：

标签： javascript dictionary d3.js svg geo

【解决方案1】：

您将文本和路径附加到不同的父级：svg 和 g。这是一个问题，因为：

var g = svg.append("g")
  .attr("transform", "translate(" + chart_width / 2 + "," + chart_height / 2 + ")")

您的g 与文本具有svg 没有的转换。这就是为什么您的文本被推到比投影路径更远的宽度/2、高度/2 的原因。文本只需使用svg.selectAll。

投影已经应用了翻译，您可以将翻译应用于父级或投影，但不应同时使用两者。

【讨论】：

您好安德鲁：非常感谢您的 cmets！我修改了 g 的 text 函数并使用 svg.selectAll("text") 尝试添加州名。但是文字仍然没有显示在地图上？我想知道是因为颜色不透明吗？还是有其他问题？再次感谢您的宝贵时间！
将文本附加到路径可能存在问题 - 您正在重新选择路径的子文本元素。您可以跳过将子文本附加到路径（无论如何都不应该呈现，它看起来像是早期版本的残余），或者在附加文本时尝试svg.selectAll(null) 输入所有内容。如果两者都不是，那么可能是文本在奇怪的位置呈现，检查 DOM 可能会显示它们隐藏的位置。
谢谢！安德鲁！固定的！我刚刚尝试了 svg.selectAll(null) 并解决了！