Javascript D3线路径更新动画不平滑

我有一个由区域、线条和圆圈组成的图形，我正在尝试根据用户输入进行更新，我已经开始工作了，但是当从较低的数据量过渡到较高的数据量时，比如从

[4,2,3,4,5]

到

[2,4,3,1,5,8,6]

，这些线条会将当前路径动画化到新位置，但是偏移刚刚捕捉到位，没有任何新值添加到路径的动画

我想让它做的是从当前线路径到新线路径的动画，平滑过渡，这样新值就不会只是捕捉到位，而不管数据的数量如何

另外，另一方面，图形的宽度在更新时不断变化，我希望它能够延伸到svg的整个宽度，无论存在多少数据，我如何实现这一点

这是我到目前为止所拥有的一把小提琴

---

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

您描述的问题有点复杂，因为在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]
          ]);

顺便说一句：在制作折线图动画时，你通常会遇到一些其他问题。其中一些在迈克的书上。还有一个相关的问题

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

不必两次调用更新函数，您可以在绘图函数中实现两步绘图，如下所示：

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