Javascript 在D3中使用转换更新数据后更新拖动/滚动原点

我通过拖动、缩放和更新来处理图表。但是，在添加新数据后，拖动位置不会更新

复制步骤：

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

所以我想，在添加新数据时，我必须以某种方式更新拖动原点。但是怎么做呢？到目前为止，我还没有找到任何这样的例子。我也看过了，但我还是不清楚。同样的事情发生在变焦上，我想这也是同样的问题

代码和演示可以在这里看到：

---

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

好的，我已经筛选了你的代码和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）

重置所有这三个变量，这意味着转换将只针对当前原点进行聚合，原点将反映您的移动窗口