在D3中转换后的数据更新后，更新拖动/滚动原点

Question

我在图表上进行拖动，缩放和更新。 这在大多数情况下有效，但是，添加新数据后，拖动位置不会更新。

重现步骤：

• 观看演示
• 等待几秒钟，以便将一些数据添加到图形中
• 然后尝试将图表向左或向右拖动
• 该图将被推回到起点，并且从该点开始拖动以应有的方式进行

所以我想，在添加新数据时，我必须以某种方式更新拖动原点。 但是如何？ 到目前为止，我找不到任何示例。 我还查看了D3拖动功能的代码 ，但对我来说仍然不清楚。 缩放也会发生同样的事情，我想那是同样的问题。

可以在这里查看代码和演示： http : //jsbin.com/irixag/1/edit

编辑：如果不清楚我的意思，请告诉我，以便我重新表述这个问题。

Answer 1

好的，我一直在仔细检查您的代码和d3.js源代码，并且注意到了几件事。

首先，我的解决方案的要点是添加

function update() {
    ...
    if (shiftRight) {
        zoom.x(x); // You're missing this line
        ...
    }
    ...
}

原因如下：

您正在使用d3.behavior.zoom()对象上的.x(x)调用来初始化水平拖放。 看起来不错，除了此拖放处理程序不是为变化的原点设计的。

基本上，当您调用d3.behavior.zoom().x(x)您声明的是x的值现在是原点。 现在，d3.js会存储此值，因此即使您在动画循环中向右移动窗口，拖放操作仍会保留原始原点。

在d3.behavior.zoom源中，有三个感兴趣的变量x0 ， x1和translate 。 x1是对当前值的参考x你传递的变量， x0是复制的值x在最初传入的。 translate是所有阻力+滴合并的总翻译。

现在，方便地调用zoom.x(x)重置所有这三个变量，这意味着转换将仅针对当前原点进行汇总，并且原点将反映您的移动窗口。