D3.js v4技术问询：实现地图缩放时标记圆的同步缩放

这个问题我之前也碰到过，核心原因是你现在的标记圆和地图共用了同一个带缩放变换的<g>，再加上forceSimulation的坐标逻辑没和缩放同步，导致缩放时圆的尺寸和位置出现了问题。给你两种常用的解决思路，对应不同的需求：

思路1：让标记圆保持固定屏幕大小（缩放时视觉尺寸不变） #

如果希望不管地图怎么缩放，标记圆在屏幕上的像素大小始终不变（比如始终是2px），可以把标记圆放到独立的<g>里，不继承地图的缩放变换，然后在缩放/拖拽时同步更新圆的位置：

修改步骤： #

1. 新增一个独立的<g>用来存放标记圆：

var width = 660, height = 400;
var zoom = d3.zoom()
 .scaleExtent([1, 10])
 .on("zoom", zoomed);
var projection = d3.geoMercator()
 .center([50, 10])
 .scale(150)
 .rotate([10,0]);
var svg = d3.select("svg")
 .attr("width", width)
 .attr("height", height)
 .call(zoom);
var path = d3.geoPath()
 .projection(projection);

// 地图用的g
var g = svg.append("g");
// 标记圆用的独立g
var markersG = svg.append("g");

let currentTransform; // 保存当前缩放变换

2. 调整zoomed函数，同时更新标记圆的位置：

function zoomed() {
 currentTransform = d3.event.transform;
 g.attr("transform", currentTransform);
 // 同步更新标记圆位置
 updateMarkers();
}

3. 修改标记圆初始化和forceSimulation逻辑：

// 初始化标记圆
var locations = markersG.selectAll("circle")
 .data(devicesAll)
 .enter()
 .append("circle")
 .attr("r", 2) // 固定屏幕尺寸
 .style("fill", "black")
 .style("opacity", 1);

// 初始化时给每个设备添加原始投影坐标
devicesAll.forEach(d => {
 const proj = projection([d.LastLocation.lon, d.LastLocation.lat]);
 d.x = proj[0];
 d.y = proj[1];
});

// 调整力导向模拟，基于原始投影坐标
var simulation = d3.forceSimulation()
 .force('x', d3.forceX().x(d => d.x))
 .force('y', d3.forceY().y(d => d.y))
 .force("charge", d3.forceManyBody().strength(0.5))
 .force("collide", d3.forceCollide().strength(.1).radius(2).iterations(2));

// 力导向更新时同步标记圆位置
simulation
 .nodes(devicesAll)
 .on("tick", updateMarkers);

// 封装标记圆更新函数
function updateMarkers() {
 locations
   .attr("cx", d => currentTransform.applyX(d.x))
   .attr("cy", d => currentTransform.applyY(d.y));
}

这样修改后，标记圆的屏幕大小始终固定，位置会跟着地图的缩放拖拽同步变化。

思路2：让标记圆保持固定地理大小（缩放时视觉尺寸随地图同步） #

如果希望标记圆在地图上代表固定的地理范围（比如每个圆对应100公里的区域），就需要让圆的半径随地图缩放比例反向调整，抵消<g>的缩放效果：

修改步骤： #

1. 在zoomed函数中添加半径调整逻辑：

let currentTransform;
function zoomed() {
 currentTransform = d3.event.transform;
 g.attr("transform", currentTransform);
 // 根据缩放比例调整圆半径，保证地理大小不变
 locations.attr("r", 2 / currentTransform.k);
}

2. 调整forceSimulation的碰撞检测半径，同步随缩放变化：

var simulation = d3.forceSimulation()
 .force('x', d3.forceX().x(d => {
   const proj = projection([d.LastLocation.lon, d.LastLocation.lat]);
   return proj[0];
 }))
 .force('y', d3.forceY().y(d => {
   const proj = projection([d.LastLocation.lon, d.LastLocation.lat]);
   return proj[1];
 }))
 .force("charge", d3.forceManyBody().strength(0.5))
 // 碰撞半径随缩放比例动态调整
 .force("collide", d3.forceCollide().strength(.1)
   .radius(() => 2 / currentTransform.k)
   .iterations(2));

这种方案下，标记圆的地理范围固定，缩放时视觉大小会和地图同步变化，不会出现相对过大的问题。

你可以根据自己的实际需求选择对应的方案，两种方式都能解决你当前的问题~

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