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

Question

我正在使用 D3.js 使用墨卡托投影绘制美国地理地图。该地图代表了美国每个城市的人口。人口数据存储在以下文件中：

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>

但是如何在将鼠标悬停在这些圆圈上时向它们添加城市名称标签？

Answer 1

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

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

How to label cities in a Geographical Map using D3.js?

javascript

maps

mercator

d3.js