D3线路径更新动画不流畅答案

【问题标题】：D3 line path update animation not smoothD3线路径更新动画不流畅
【发布时间】：2012-12-06 09:05:49
【问题描述】：

我有一个由区域、线条和圆圈组成的图表，我试图根据用户输入进行更新，我已经开始工作了，但是当从较低的数据量转换到较高的数据量时，比如从 @987654322 @ 到 [2,4,3,1,5,8,6]，线条将它们的当前路径动画化到它们的新位置，但是偏移量只是被捕捉到位，对于添加到路径的任何新值都没有动画。

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

另外，顺便说一句，图表宽度在更新时会不断变化，我希望它能够拉伸到 svg 的整个宽度，无论存在多少数据，我该如何实现？

这是我迄今为止所拥有的http://jsfiddle.net/znmBy/。

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

【问题讨论】：

标签： javascript jquery d3.js

【解决方案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 的path animation page 中有所介绍。还有一个相关的问题here。

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

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

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);

【讨论】：