我使用d3.js使用mercator投影绘制美国的地理图。该地图代表了美国每个城市的人口。总体数据存储在以下文件中：
表示城市位置的圆圈显示在地图中。
代码在下面粘贴：
<!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);