D3 圈子重新出现后太大了

Question

我有一张 D3 的美国地图，上面画着圆圈。当我调整窗口大小时，地图消失并出现 D3 条形图。

当我刷新页面并从图表开始然后切换到地图时，圆圈显得很大。

我还注意到州边界线也更粗。

我在两个函数中构建了地图和条形图：map() 和 mobileChart()。两者都在我的脚本底部执行。

这是我绘制圆圈的代码：

map
    .append("circle")
    .attr("class", "bubbles")
    .attr("cx", coordinates[0])
    .attr("cy", coordinates[1])
    .attr("r", function(){
             return radius(d[i].total)
    )};

coordinates 是我圈子的经纬度，是从 csv 文件中读取的。 r 由同一文件中的总数确定。

在地图重新出现后，代码似乎多次重新输入数字以确定圆圈的大小和位置。

当我首先使用地图启动页面时，不会发生这种情况。当我再次从地图调整到图表的大小时，圆圈保持不变。

我使用以下函数来根据窗口大小更改地图的大小。也许这就是我的解决方案的来源？

d3.select(window).on('resize', resize);
function resize() {
    // Adjust things when the window size changes
    width = parseInt(d3.select('#map').style('width'));
    width = width - margin.left - margin.right;
    height = width * mapRatio;

    // Update projection
    projection
        .translate([width / 2, height / 2])
        .scale(width);

    // Resize the map container
    map
        .style('width', width + 'px')
        .style('height', height + 'px')
}

Answer 1

我又看了一遍这个问题，我终于想我知道你在问什么了。本质上，它归结为您将圆半径设置为固定值，而不管容器的宽度如何。由于您在 SVG 上使用 viewBox，因此一个小容器会显着扩大半径。如果你从一个巨大的宽度和尺寸开始，就会发生相反的情况，圆圈很小。

修复它的简单方法是根据宽度缩放半径：

d3.csv("pickups.csv", function(d) {
  return {
    total: +d.total,
    coordinates: projection([d.lat, d.lon])
  };
}, function(error, rows) {

  map.append("g")
    .selectAll(".bubbles")
    .data(rows)
    .enter()
    .append("circle")
      .attr("class", "bubbles")
      .attr("cx", function(d){
        if (d.coordinates)
          return d.coordinates[0];
      })
      .attr("cy", function(d){
        if (d.coordinates)
          return d.coordinates[1];
      })
      .attr("r", function(d){
          return radius(d.total) * (width/goodCircleWidth) //<-- THIS ADDED
      });
});

正如您在上面看到的，我正在根据已知宽度“goodCircleWidth”（您认为它们看起来不错）缩放半径。

另请注意，关于d3.js 编码约定的一点。与其显式循环您的拾取数据，不如像我在上面所做的那样对它进行数据绑定。

这是更新后的example。