D3带折线的多折线图

Question

我正在研究带有过渡的多线图的纯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/ ）那样使它顺利运行。 有什么建议吗？ 可能与定义的范围有关，这避免了“视口”之外的值。

更新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

Answer 1

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

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