D3 缩放侦听器不考虑编程缩放

Question

首先，当附加到"缩放"事件(例如使用鼠标(时，我可以使缩放行为起作用。 而且我可以通过编程方式缩放(例如，由文档中的更新触发(。

但是，如果我有一个缩放事件，-->THEN 编程缩放<--,然后再次缩放事件，则第二个缩放事件将从上一个鼠标"缩放"事件结束时的 SVG 绘图位置重新启动。

令人讨厌的是，它丢弃了程序化缩放期间发生的事情。

"缩放"事件：

const zoomed = () => select("g").attr("transform", event.transform);
svg
.call(
zoom()
.extent([[0, 0], [600, 600]])
.scaleExtent([0.1, 5000])
.clickDistance(10)
.on("zoom", zoomed)
)

程序化缩放：

let transform = zoomTransform(select("g").node());
let t = zoomIdentity
.translate(transform.x + 1000, transform.y + 1000)
.scale(transform.k);
select("g").attr("transform", t);

非常感谢帮助

Answer 1

您需要在缩放函数上调用转换，如下所示

svg.transition().duration(300).call(zoomFunc.transform, d3.zoomIdentity.translate(0, 0).scale(1));

zoomFunc会是这样的

var zoomFunc = d3.zoom()
.extent([[0, 0], [600, 600]])
.scaleExtent([0.1, 5000])
.on("zoom", zoomed);
svg.call(zoomFunc)

我还做了一个演示JSFiddle。