D3 缩放未正确重置缩放状态和平移位置

Question

好吧，我已经让它工作了，但不知何故，现在测试时它不再工作了。所以在我的项目中我有一个 map 即 zoom- 和 dragable。放大或拖动时，您始终可以单击 重置按钮 来重置整个演示文稿。效果很好。

所以缩放定义:

var g = svg.append("g");
var zoom = d3.behavior.zoom()
    .translate([0, 0])
    .scale(1)
    .scaleExtent([1, maximumZoom])
    .on("zoom", zoomed);
svg.call(zoom);

并且缩放函数是：

g.attr("transform", "translate([0,0]).scale(" + 1 + ")");
zoom.translate([0, 0]);
zoom.scale(1);

单击“重置”按钮后，重置正确完成。但是当现在缩放或拖动到任何地方时，您实际上看到它是旧的缩放和位置。

但奇怪的是:

zoom.translate([0, 0]);
zoom.scale(1);

应该可以解决这个问题。正如我 1 个月前所说，它工作正常。

此外还有缩放功能：

function zoomed() {
    g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

Answer 1

我不是 100% 确定，但似乎调用 缩放事件 或者假设设置缩放事件后来在svg元素上解决了这个问题。

所以只需调用

zoom.on("zoom", zoomed);
svg.call(zoom);

一切都完成后。我把它放到一个正在加载地图的函数中。现在又可以正常工作了。

您可以查看网站here。

D3 缩放未正确重置缩放状态和平移位置

D3 zoom is not properly reseting zoom state and translated location

javascript

jquery

scale

zooming

d3.js