D3.js 不附加到坐标的圆_D3.js

D3.js 不附加到坐标的圆

d3.js

D3.js 不附加到坐标的圆,d3.js,D3.js,D3非常新，所以感谢您的耐心！我正在绘制一张地图，我想在美国地图上的某些城市添加圆圈。lat和lon坐标位于我在GitHub上托管的.csv中现在，我试图附加的两个圆圈出现在地图的最左角：以下是我遇到的错误：代码如下： <head> <script> function draw(geo_data) { 'use strict'; var margin = 75, width = 1920 - margin,

D3非常新，所以感谢您的耐心！我正在绘制一张地图，我想在美国地图上的某些城市添加圆圈。lat和lon坐标位于我在GitHub上托管的.csv中

现在，我试图附加的两个圆圈出现在地图的最左角：

以下是我遇到的错误：

代码如下：

<head>
<script>
    function draw(geo_data) {
      'use strict';

      var margin = 75,
        width = 1920 - margin,
        height = 1080 - margin;

      var svg = d3.select('body')
        .append('svg')
        .attr('width', width + margin)
        .attr('height', height + margin)
        .append('g')
        .attr('class', 'map');

      var projection = d3.geoAlbersUsa();

      var path = d3.geoPath().projection(projection);

      var map = svg.selectAll('path')
        .data(geo_data.features)
        .enter()
        .append('path')
        .attr('d', path)
        .style('fill', 'rgba(253, 227, 167, 0.8)')
        .style('stroke', 'black')
        .style('stroke-width', 0.4);

      d3.csv('top100cities.csv', function(error, data) {

        svg.append('g')
          .attr('class', 'bubble')
          .selectAll('circle')
          .data(data)
          .enter()
          .append('circle')
          .attr('cx', function(d) {
            return projection([d.lon, d.lat]);
          })
          .attr('cy', function(d) {
            return projection([d.lon, d.lat]);
          })
          .attr('r', 20)
          .style('fill', 'rgba(103, 65, 114, 0.5)');

      });

    };
</script>
</head>
<body>
<script>
d3.json('us_states.json', draw);
</script>
</body>


功能图（地理位置数据）{
"严格使用",；
var保证金=75，
宽度=1920-边距，
高度=1080-边距；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'宽度'，宽度+边距）
.attr（'高度'，高度+边距）
.append（'g'）
.attr（'class'，'map'）；
var projection=d3.geoAlbersUsa（）；
var path=d3.geoPath（）.projection（projection）；
var map=svg.selectAll（'path'）
.数据（地理位置数据.特征）
.输入（）
.append（'路径'）
.attr（'d'，路径）
.style（'fill'，'rgba（253,227,167,0.8）'
.style（'笔划'，'黑色'）
.样式（“笔划宽度”，0.4）；
d3.csv（'top100cities.csv'，函数（错误，数据）{
append（'g'）
.attr（'class'，'bubble'）
.selectAll（'圆圈'）
.数据（数据）
.输入（）
.append（'圆'）
.attr（'cx'，函数（d）{
返回投影（[d.lon，d.lat]）；
})
.attr（'cy'，函数（d）{
返回投影（[d.lon，d.lat]）；
})
.attr（'r'，20）
.样式（“填充”，“rgba（103,65,114,0.5）”；
});
};
d3.json（'us_states.json'，draw）；

您正在为cx和cy设置相同的值：

      .attr('cx', function(d) {
        return projection([d.lon, d.lat]);
      })
      .attr('cy', function(d) {
        return projection([d.lon, d.lat]);
      })

该值不是cx或cy，而是：

投影（[d.lon，d.lat]）

将返回一个包含x和y的两元素数组，因此应使用：

      .attr('cx', function(d) {
        return projection([d.lon, d.lat])[0]; // x coordinate
      })
      .attr('cy', function(d) {
        return projection([d.lon, d.lat])[1]; // y coordinate
      })

传递数组而不是数字时会发生错误