如何在d3中存储缩放状态并增量更新

Question

d3存储元素的转换状态，并在发生缩放事件时更新它。

我想使用我自己的对象来存储转换状态，并且只使用d3缩放事件来更新它。

下面是我尝试做的一个例子：

// My transform state object
myTransState = {x:0, y:0, k:1}
onZoomEvent(e){
// Update my transform state object with change
myTransState.x += e.transform.x
myTransState.y += e.transform.y
myTransState.k *= e.transform.k
// Reset d3 transform state
e.transform.x = 0
e.transform.y = 0
e.transform.k = 1
}

这不起作用。x和y的增量增大，绘图远离鼠标指针。

我知道我可以直接使用d3状态变换，但在某些情况下，我需要自己跟踪状态(例如，分离x和y比例因子kx和ky(。

为什么这没有按预期工作？在我重置d3转换状态后，是否还有其他东西在修改它？

Answer 1

修改事件不足以重置缩放变换，因为d3不会在事件中存储当前缩放坐标。

要重置转换，您需要调用zoom.transform

selection.call(zoom.transform, zoomIdentity)

其中selection是与称为selection.call(zoom)的选择相同的选择，而zoomIdentity是单位变换{x: 0, y:0, z:1}

请注意，调用zoom.transform也会触发onZoomEvent回调。为了避免无限循环，可以检查事件的转换是否为{x: 0, y: 0, z: 1}，以及是否取消了回调。

onZoomEvent(e){
if(e.transform.toString() === zoomIdentity.toString()) {
return
}

// Update my transform state object with change
myTransState.x += e.transform.x
myTransState.y += e.transform.y
myTransState.k *= e.transform.k
// Reset d3 transform state
selection.call(zoom.transform, zoomIdentity)
}