Question

我是两条非常不同的道路，我想顺利地改变一条让它看起来像另一条道路。我尝试使用在“d”属性上应用的.transition（）方法，但结果很差。

我使用的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中的行，{{1}中的二次曲线}）。对于直到最后一点的所有点，过渡都很好，但最后一段显示的是您在示例中遇到的相同类型的跳跃。这是因为二次曲线需要一个控制点，当转换开始时，控制点必须在空气中实现，从而导致跳跃。

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

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

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

希望有所帮助。

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

1 个答案: