如何将状态名称放入地理图表/D3.js
Posted
技术标签:
【中文标题】如何将状态名称放入地理图表/D3.js【英文标题】：How to put the state name into the Geo chart/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
【问题讨论】：
【参考方案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) 并解决了！以上是关于如何将状态名称放入地理图表/D3.js的主要内容，如果未能解决你的问题，请参考以下文章