datamaps缩放地图时如何减小气泡的圆半径？

问题原因 #

你当前的缩放逻辑是直接给SVG下所有<g>元素应用了整体transform: translate+scale变换，气泡作为g组内的子元素自然会被同步缩放，和你给路径加non-scaling-stroke防止描边缩放是同原理的反向需求。下面提供两种可落地的解决方案：

方案1：CSS快速实现（适配现代浏览器） #

直接给所有气泡元素加vector-effect: non-scaling-size属性即可，这个属性和你用的non-scaling-stroke同属SVG矢量效果规范，会自动忽略父级的缩放变换，保持元素的原始尺寸：

/* 替换成你实际的气泡类名，datamap默认气泡类为.datamaps-bubble */
.datamaps-bubble {
  vector-effect: non-scaling-size;
}

注意：该方案兼容性稍差，低版本IE、旧版Safari不支持，适合仅面向现代浏览器的场景

方案2：JS动态调整（兼容性最好，可控性最高） #

直接在每次缩放触发的_update方法里同步调整气泡的半径即可，你可以控制半径的缩放幅度，实现完全不变或者随缩放小幅变化的效果，修改你的Zoom.prototype._update方法：

Zoom.prototype._update = function(translate, scale) {
        this.d3Zoom
                .translate(translate)
                .scale(scale);
        this.datamap.svg.selectAll("g")
                .attr("transform", "translate(" + translate + ")scale(" + scale + ")");
        // 新增气泡尺寸调整逻辑
        this.datamap.svg.selectAll(".datamaps-bubble") // 替换成你实际的气泡类名
                .attr("r", function() {
                    // originalRadius是你初始化气泡时存储的原始半径，也可以直接写固定初始值
                    const baseR = d3.select(this).data()[0].originalRadius || 5; 
                    // 完全保持大小不变：return baseR / scale
                    // 需要缩放时气泡小幅变大但不跟地图同比例：调整指数即可，比如0.7
                    return baseR / Math.pow(scale, 0.7);
                });
};

如果需要缩放动画过程中气泡尺寸也同步平滑变化，把这段逻辑直接复用在动画的tween回调中即可。

额外优化建议 #

如果同时需要避免气泡描边随缩放变粗，可以给气泡加vector-effect: non-scaling-stroke样式。

内容的提问来源于stack exchange，提问作者Ajzz