0

我处理带有拖动、缩放和更新的图表。这通常有效，但是，在添加新数据后，拖动位置不会更新。

重现步骤：

  • 看演示
  • 等待几秒钟，以便将一些数据添加到图表中
  • 然后尝试向左或向右拖动图形
  • 图表将被推回开始，从那时起，拖动以它应该的方式工作

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

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

编辑：如果不清楚我的意思，请告诉我，以便我可以改写问题。

4

1 回答 1

1

好的，我一直在筛选您的代码和 d3.js 源代码，我注意到了一些事情。

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

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

原因如下：

您正在使用对对象的.x(x)调用来初始化水平拖放。d3.behavior.zoom()这看起来很好，除了这个拖放处理程序不是为不同的来源设计的。

基本上，当你打电话时，你现在d3.behavior.zoom().x(x)声明的价值是原点。现在，d3.js 存储了这个值，所以即使你在动画循环中向右移动窗口，拖放仍然会遵循原来的原点。x

在d3.behavior.zoom源中有三个感兴趣的变量x0，x1， 和translate。是对您传入的变量x1的当前值的引用。是您最初传入时的复制值。是所有拖放组合的聚合翻译。xx0xtranslate

现在，调用会方便zoom.x(x)地重置所有这三个变量，这意味着翻译只会针对当前原点进行聚合，原点将反映您的移动窗口。

于 2013-03-11T04:56:10.653 回答