Javascript 使用d3动态更新一条线，使该线前后移动

我有实时数据，我需要在折线图中显示。因此，我正在使用更新路径（每秒钟执行一次）

---

这使我的图形移动更加平滑，但我想从数组中删除旧数据。因此，我比较了时间并删除了旧数据，令人惊讶的是，它使我的图表前后移动。有谁能帮我解释一下，如果我从数组中删除旧数据，为什么行的移动会有所不同？

我得到了问题的答案。在上面的代码中，我正在为行设置动画。而是将动画应用于变换

svg.select(".strream").data([strreamDataArray])
        .attr("transform", "translate(0,10)")
        .attr("d", realStepAfterLine)
        .interrupt().transition().ease("linear")
        .duration(1000)
        .attr("transform", "translate(xscale(0))");

---

在不了解代码细节的情况下，这很可能是数据联接和更新模式的影响。你可能想看一看，了解一下正在发生的事情。这一点也有帮助

svg.select(".strream").data([strreamDataArray])
        .attr("transform", "translate(0,10)")
        .attr("d", realStepAfterLine)
        .interrupt().transition().ease("linear")
        .duration(1000)
        .attr("transform", "translate(xscale(0))");