如何使用D3.js在地理地图上标记城市？

Question

如何使用D3.js在地理地图上标记城市？

4

我正在使用D3.js绘制美国地图，并采用Mercator投影方式。这张地图展示了美国各城市的人口分布情况。人口数据存储在以下文件中：

https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us-cities.csv

地图上显示了代表城市位置的圆圈。

以下是代码粘贴链接：

<!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>

但是如何在鼠标悬停在这些圆圈上时添加城市名称的标签呢？

- User456898

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gerardo Furtado · Accepted Answer

创建工具提示最基本（也是最丑陋的）方法是使用<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);