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

时间:2015-02-20 21:01:57

标签: javascript jquery d3.js zoom scale

嗯,我已经让它工作了,但不知怎的,现在测试它不再起作用了。所以在我的项目中,我有缩放地图 - 和可拖动。放大或拖动时,您始终可以单击重置按钮以重置整个演示文稿。这很有效。

所以缩放定义

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 + ")");
}

1 个答案:

答案 0 :(得分:1)

我不是100%肯定,但似乎调用 缩放事件或者让我们说设置缩放事件以后< / strong> on svg元素正在解决这个问题。

所以只需致电

zoom.on("zoom", zoomed);
svg.call(zoom);
一切都结束后

我把它放入一个加载地图的函数中。现在它再次正常工作。

您可以看到网站here