重新出现后，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是我的圈子＆＃39;纬度和经度，从csv文件中读取。 r由同一文件中的总数决定。

似乎代码重新输入数字以确定圈子＆＃39;地图重新出现后，大小和位置会多次出现。

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

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

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
      });
});

如上所述，我正在将半径缩放到已知宽度＆＃34; goodCircleWidth＆＃34; （你认为它们看起来很好）。

另请注意，d3.js编码约定上的一点。它不是明确地循环你的拾取数据，而是像我上面所做的那样数据绑定它更可取。

这是一个更新的example。