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

Question

我有两条截然不同的道路，我想顺利地改变一条，使其看起来像另一条。我尝试过使用应用于“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 在补间两个结构相似的路径(相同数量的段和相同类型的段)方面做得很好。结构越不同，事情就开始变得越困惑。

考虑this example .

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

后两个路径数据d_3和d_4具有相同的段数，但最终段是不同的类型(d_3中的行>，d_4 中的二次曲线)。对于直到最后一点的所有点来说，过渡都很好，但是最后一段显示出与您在示例中经历的相同类型的跳跃。这是因为二次曲线需要一个控制点，当转变开始时，控制点必须凭空出现，从而导致跳跃。

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

HERE是 Mike Bostock 创建的一个很好的补间路径函数。

在您的示例上实现时，它给出了相当平滑的结果:JSFiddle

希望有帮助。