使用d3动态地更新线使得线来回移动

update a line dynamically using d3 makes the line move back and forth

本文关键字：移动 使用 动态 更新 d3      更新时间：2023-09-26

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

svg.select(".strream").data([streamData]).interrupt().transition()
            .duration(1000)
            .ease("linear").attr("d", StepAfterLine)

这使我的图形移动更平滑，但我想从数组中删除旧数据。所以我比较了时间并删除了旧数据，令人惊讶的是，这让我的图表来回移动。如果我从数组中删除旧数据，有人能帮助我为什么行的移动方式不同吗？

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

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