你是在问如何 * 不 * 根据缩放比例缩放圆圈吗？你的方法是缩放g元素，圆圈就在里面。我的方法是在缩放时“缩小”圆圈。

// zoom and pan
var zoom = d3.behavior.zoom()
  .on("zoom",function() {
     g.attr("transform","translate("+ 
        d3.event.translate.join(",")+")scale("+d3.event.scale+")");
     g.selectAll("circle")
      .attr("r", function(){
        var self = d3.select(this);
        var r = 8 / d3.event.scale;  // set radius according to scale
        self.style("stroke-width", r < 4 ? (r < 2 ? 0.5 : 1) : 2);  // scale stroke-width
        return r;
    });
});

更新fiddle。

我知道这是一个旧的职位，它已经有一个公认的答案，但正如原来的职位建议，d3的Semantic Zoom是一种更简洁的方法。（Map上城市的圆圈）。我唯一需要改变的是，我必须在转换函数中减去圆圈的初始位置，以便纠正它们的初始位置。位置。

function transform(t) {
      return function(d) {
          const point = [d.x, d.y] // this is the initial point
          const tPoint = t.apply(point) // after translation
          const finalPoint = [tPoint[0] - d.x, tPoint[1] - d.y]// subtract initial x & y to correct 
          return `translate(${finalPoint})`;
  };

}