d3.js - 使用 D3.js 在曲线类型之间转换

Question

我想使用 D3.js 在曲线类型之间转换。

看看this block .数据保持不变，但曲线类型发生变化。我期待路径保持它们在飞机上的大致位置——毕竟数据保持不变——但他们没有。路径似乎被重绘，尽管我不明白为什么在线性基础上路径似乎从左到右重绘，而线性到基础路径似乎从右到左重绘。

我在 Path Transitions 上阅读了 Mike Bostock 的帖子，但我认为这是一个略有不同的问题。在那里，数据发生变化，但曲线类型保持不变。在这里，数据保持不变，但曲线类型发生了变化。

在此先感谢您的帮助!

Answer 1

要了解为什么会有如此奇怪的过渡，让我们比较 d使用 curveBasis 的路径属性和一个 curveLinear .

首先，一个curveBasis :

d="M0,101.2061594964L45.48756294826797,89.52282837400001C90.97512589653594,77.83949725160001,181.95025179307189,54.47283500680002,271.46268884480395,84.08731623460001C360.975125896536,113.70179746240001,449.0248741034641,196.2974221628,538.5373111551961,222.09899531679994C628.0497482069281,247.90056847079998,719.0248741034642,216.90809007840002,764.512437051732,201.4118508822L810,185.915611686"

现在是 curveLinear (相同数据):

d="M0,101.2061594964L272.92537768960784,31.10617276200003L537.0746223103922,278.89304686319997L810,185.915611686"

如您所见，使用 curveLinear 的路径要简单得多。 .所以，奇怪的转变是预期的行为。

一个可能的解决方案是使用路径插值，如 this code 中所建议的。来自迈克·博斯托克。

这是带有路径插值的块: http://blockbuilder.org/anonymous/02125b1fb145a979e53f369c4976a772

PS:如果你想在加载页面时避免这种奇怪的过渡(所有路径都来自左上角)，第一次使用常规 attr 绘制它们。方法。