如何使用D3.js在地理地圖上標記城市？

我正在使用D3.js使用墨卡託投影繪製美國的地理地圖。該地圖代表美國各城市的人口。人口數據存儲在以下文件：
如何使用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>

但如何同時鼠標懸停在城市名稱的標籤添加到這些圈子？

來源

2016-11-30 User456898

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

來源

2016-11-30 09:42:32

這是現在的工作。 – User456898

在.append（「title」）之前應該刪除分號。 – User456898

@Laurel謝謝，那是因爲我複製/粘貼了你的代碼而沒有注意。我必須說，標題是基本的！有更好的選擇，請檢查我的答案：http://stackoverflow.com/a/35665974/5768908 –

如何使用D3.js在地理地圖上標記城市？

回答

相關問題