Question

我在d3中将鼠标滚轮上的缩放功能引入了我的世界地图。我正在使用以下代码，

.on("wheel.zoom",function(){
                            var currScale = projection.scale();
                            var newScale = currScale - 2*event.deltaY;
                            var currTranslate = projection.translate();
                            var coords = projection.invert([event.offsetX, event.offsetY]);
                            projection.scale(newScale);
                            var newPos = projection(coords);

                            projection.translate([currTranslate[0] + (event.offsetX - newPos[0]), currTranslate[1] + (event.offsetY - newPos[1])]);
                            g.selectAll("path").attr("d", path);

                        })
                        .call(d3.drag().on("drag", function(){
                            var currTranslate = projection.translate();
                            projection.translate([currTranslate[0] + d3.event.dx,
                                                  currTranslate[1] + d3.event.dy]);
                            g.selectAll("path").attr("d", path);
                        }))

但是我的问题是放在地图上的气泡没有按照地图的缩放进行缩放，也就是气泡的位置错位。以下是我当前工作代码的链接。 https://plnkr.co/edit/jHJ4R1YhI9yPLusUMLh0?p=preview

Answer 1

如果更新投影，则需要更新所有功能以反映新投影。你已经用你的路径完成了这个（这与你的拖拽事件有关，因为我无法滚动滚轮缩放，但原理是相同的）：

canvas {
        border: 1px solid blue;
      }

但是，您没有更新圈子，因为圈子不是路径。

你可以简单地重新应用你在第一个位置放置圆圈的方式，毕竟你只是用更新的投影做同样的事情：

<p>
Click to trigger a "draw".
<br/>
A draw will do this:<br/>
1. rotate the bottom canvas by 45 degrees.<br/>
2. copy the top canvas to the bottom canvas<br/>
3. copy the bottom canvas to the top canvas<br/>
</p>
<br/>
<p>
Clicking repeatedly will "blur" the squares. Why?
</p>
<br/>
</p>
<canvas id="canvas"></canvas>
<canvas id="tmpCanvas"></canvas>

这是一个更新的plunker。

地图中的气泡未放大地图缩放鼠标滚轮在d3中

1 个答案: