D3js-2条路径之间的平滑过渡

Question

我是2条截然不同的道路，我想平滑地改变一条道路，使其看起来与另一条道路一样。 我尝试使用应用于“ d”属性的.transition（）方法，但结果非常糟糕。

这是一个示例： http : //jsfiddle.net/yya0m0s0/1/

我使用的d3代码如下：

   var svg = d3.select("body")
              .append('svg')
              .attr('width', '375px')
              .attr('height', '490px');


    svg.append('path').attr('d', d_t0);
    svg.selectAll('path').transition()
                         .duration(3500).delay(1000)
                         .attr('d', d);

创建这种转换的最佳方法是什么？

非常感谢

Answer 1

这里的问题是您的第一个路径只有10个细分，而第二个路径有42个细分。 路径是如此不同，以至于无法使用内置路径补间在它们之间进行转换。

D3可以很好地补间结构相似（段数相同，段类型相同）的两个路径。 结构越不同，事情就变得越混乱。

考虑这个例子 。

前两个路径数据d_1和d_2具有相同的段数和类型，只有端点发生变化。 这些之间的过渡是无缝的。

第二个路径数据d_3和d_4具有相同数目的段，但最终段是不同的类型（在线d_3 ，在二次曲线d_4 ）。 过渡到最后一个点对所有点都是合适的，但是最后一个段显示了您在示例中经历的那种跳跃感。 这是因为二次曲线需要一个控制点，当过渡开始时，必须从稀薄的空气中实现控制点，从而导致跳跃。

坏消息是，解决此问题的唯一方法是为路径数据属性创建自定义补间函数。 好消息是，这是一个普遍的问题，聪明的人已经提出了可靠的解决方案。

这里是Mike Bostock创建的补间功能的良好路径。

当在您的示例上实现时，它会给出一个相当平滑的结果： JSFiddle

希望能有所帮助。