D3线路径更新动画不流畅

Question

我有一个由区域，线条和圆圈组成的图表，我正在尝试更新用户输入，我已经开始工作，但是当从较低的数据量转换到更高的数量时，例如从[4,2,3,4,5]到[2,4,3,1,5,8,6] ，这些线将其当前路径设置为新位置的动画，但是偏移刚刚被捕捉到位，没有任何新的动画添加到路径的值。

我想要它做的是从当前行路径动画到新行路径，并进行平滑过渡，这样无论数据的数量如何，新值都不会卡入到位。

此外，在旁注中，图表宽度在更新时不断变化，我希望无论有多少数据存在，它都会延伸到svg的整个宽度，我怎么能实现这一点？

这是我到目前为止的一个小提琴http://jsfiddle.net/znmBy/ 。

我希望我很清楚，我是D3的新手，所以我对术语有点不确定。

Answer 1

您描述的问题有点复杂，因为在D3中您首先必须在固定位置添加对象，然后您可以将其从原始位置设置为另一个位置。

在您的示例中，我将根据先前的值计算新的（中间）初始位置，然后使用实际的最终值再次更新图表。 这将从开始到最终位置创建一个漂亮的路径动画：

    updateGraph([
            [...].concat(computeLatestIntermediates()),
            [...].concat(getLatestTimes())
          ]);

    updateGraph([
            [...].concat(getRealValues()),
            [...].concat(getLatestTimes())
          ]);

或者，您可以将初始值设置为0 。 这将从底部到目标值创建一个漂亮的动画：

    updateGraph([
            [..., 0, 0, 0, 0],
            [...,10,12,13,14]
          ]);

    updateGraph([
            [..., 234, 245, 210, 170],
            [...,  10,  12,  13,  14]
          ]);

顺便说一句：在制作折线图时，您通常会遇到其他几个问题。 Mike的路径动画页面中介绍了其中一些内容。 还有一个相关的问题在这里 。

编辑 （更智能的解决方案）：

您可以在绘图函数中实现这样的两步绘制，而不是两次调用更新函数：

function getPathData(d,i)        { return "M 0,0 ... L n,n"; }
function getInitalTransform(d,i) { return "translate(...)";  }
function getFinalTransform(d,i)  { return "translate(...)";  }

path
    .attr("d", getPathData)
    .attr("transform", getInitalTransform)
  .transition()
    .ease("linear")
    .attr("transform", getFinalTransform);