D3多折线图与过渡

D3 Multiline Chart with transition

本文关键字：折线图 D3      更新时间：2023-09-26

我正在研究一个带过渡的多线图的纯d3实现。它工作得很好，只有一点例外。用一条线作为路径使用过渡似乎相当困难。我发现了一些使用剪辑路径等的解决方案，并且总是结合警告，这些解决方案相当消耗性能。

是否有更简单的方法在多线图中显示进度，作为一个真正的点对点绘图(至少在用户的感知中)。

你可以在http://bl.ocks.org/m99coder/136db7134df6fdc3e3cf

下查看我的当前代码

致以亲切的问候马可

更新2015-07-14 14:14:00 CET(中央东部东京)

我重构了部分代码:http://bl.ocks.org/m99coder/8a9fab35b8f47ab8844c。但不幸的是，我不能让它的工作像你给教程链接(http://bost.ocks.org/mike/path/)一样顺利。任何建议吗?也许这与定义的范围有关，它避免了"viewport"之外的值。

更新2015-07-14 14:57:00 CET(中央东部东京)

越来越接近但还不完美:http://bl.ocks.org/m99coder/136db7134df6fdc3e3cf/a53f06a0334bada96e1f892c886c5b68fe3c0a05。看起来路径在平滑过渡到左边之后又跳回到右边。

更新2015-07-14 17:37:00 CET(中央东部东京)

协调更新和转换的持续时间也没有解决这个问题。现在它跳到左边:http://bl.ocks.org/m99coder/8a9fab35b8f47ab8844c/cd25a9d33839f52974780b1c142922cbbf8f64f4

我设法使它按预期工作。这是一个时间问题。在完成转换之前修改了数据。新方法使用回调来获得转换结束的通知，然后转移数据。

http://bl.ocks.org/m99coder/54d6e0130064c699e6e4/06149dd1ab22cebf5b307bab3ec90079e356bce9

相关文章：