如何在 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 是 the identity transform {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)
}

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

How to store zoom state and update incrementally in d3?

javascript

d3.js