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

D3js - Smooth transition between 2 paths

本文关键字：平滑 之间 路径 D3js-2      更新时间：2023-09-26

我是两个非常不同的路径，我想平滑地更改其中一个，使其看起来像另一个。我尝试过在"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);

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

非常感谢

这里的问题是第一条路径只有10个段，第二条路径有42个段。路径是如此的不同，以至于使用内置的路径tweening在它们之间转换是不可能的。

D3很好地对结构相似的两条路径（相同数量的段和相同类型的段）进行了粗化。结构越是不同，事情就开始变得越混乱。

考虑这个例子。

前两个路径数据d_1和d_2具有相同数量和类型的段，只是端点改变。两者之间的过渡是无缝的。

后两个路径数据d_3和d_4具有相同数量的分段，但最终分段是不同类型的（d_3中的直线，d_4中的二次曲线）。从所有点到最后一点的过渡都很好，但最后一段会显示出与示例中相同的跳跃。这是因为二次曲线需要一个控制点，当过渡开始时，控制点必须凭空实现，从而导致跳跃。

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

HERE是Mike Bostock创建的函数之间的良好路径。

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

希望能有所帮助。

相关文章：