我正在使用 D3.js 使用墨卡托投影绘制美国的地理 map 。该 map 代表了美国每个城市的人口。人口数据存储在以下文件中:
表示城市位置的圆圈显示在 map 中。
代码贴在下面:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="D3byEX 12.18" />
<meta charset="utf-8">
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script>
var width = 1000, height = 500;
var svg = d3.select('body')
.append('svg')
.attr({
width: width,
height: height
});
var usDataUrl = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us-states.json',
citiesDataUrl = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us-cities.csv';
queue()
.defer(d3.json, usDataUrl)
.defer(d3.csv, citiesDataUrl)
.await(function (error, states, cities) {
var path = d3.geo.path();
var projection = d3.geo.albersUsa()
.translate([width / 2, height / 2])
.scale([1000]);
path.projection(projection);
svg.selectAll('path')
.data(states.features)
.enter()
.append('path')
.attr('d', path)
.style({
fill: 'none',
stroke: 'black'
});
svg.selectAll('circle')
.data(cities)
.enter()
.append('circle')
.each(function (d) {
var location = projection([d.longitude, d.latitude]);
d3.select(this).attr({
cx: location[0], cy: location[1],
r: Math.sqrt(+d.population * 0.00004)
});
})
.style({
fill: 'blue',
opacity: 0.75
});
});
</script>
</body>
</html>
但是如何在将鼠标悬停在这些圆圈上时向它们添加城市名称标签？
最佳答案
创建工具提示的最基本(也是丑陋)的方法是使用 <title> :
svg.selectAll('circle')
.data(cities)
.enter()
.append('circle')
.each(function (d) {
var location = projection([d.longitude, d.latitude]);
d3.select(this).attr({
cx: location[0], cy: location[1],
r: Math.sqrt(+d.population * 0.00004)
});
})
.style({
fill: 'blue',
opacity: 0.75
})
.append("title")
.text(d=>d.name);
关于javascript - 如何使用 D3.js 在地理 map 中标记城市？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40884793/