奇怪的 D3 pan/zoom 行为 - 加速平移

Question

我有一个 d3 示例，其中在 x 轴上平移会导致加速平移。也就是说，当我按住左键并移动指针时，数据会以非线性方式平移。这可能在示例中得到了最好的说明，请参阅：

https://bl.ocks.org/sachams/d8621093ebb8181d50fe

我读了一些帖子，这些帖子表明问题是我将缩放器附加到用于捕获鼠标输入的同一元素，并且我必须在它们之间放置一个额外的元素 (d3.behavior.zoom jitters, shakes, jumps, and bounces when dragging)。

我尝试了各种添加不同子元素并将我的缩放器附加到不同位置的组合，但找不到一种有效的方法。

有什么建议吗？

Answer 1

问题是在您的 zom 处理程序函数 (update()) 中您正在重置 x 比例的域：

x.domain(scope.range);
// ...
Zoomer.x(x) // update the zooming behavior to match the domain

第一行是导致抖动的原因。在调用此代码之前，您已经在缩放行为直接调用的函数中将 scope.range 设置为 x.domain()，因此这是不必要的。第二行也不是必需的，因为您已经将缩放行为设置为 "track" x 比例，但在这种情况下不会造成任何伤害。