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

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

看一看。数据保持不变，但曲线类型会更改。我原以为路径会保持它们在飞机上的大致位置——毕竟数据保持不变——但事实并非如此。路径似乎被重新绘制，尽管我不明白为什么从“基础到线性”的路径似乎是从左到右重新绘制的，而从“线性到基础”的路径似乎是从右到左重新绘制的

我读过迈克·博斯托克在上的文章，但我认为这是一个稍微不同的问题。在这里，数据会发生变化，但曲线类型保持不变。在这里，数据保持不变，但曲线类型发生变化

---

提前感谢您的帮助

为了理解为什么会有如此奇怪的转换，让我们使用

curveBasis

和

curveLinear

来比较路径的

d

属性

首先，一个

curveBasis

：

d="M0101.2061594964L45.48756294826797,89.522828383700001C90.97512589653594,77.8394972516001181.95025179307189,54.4728350680002271.46268884480395,84.08731623460001C360.97512589656113.70179746240001449.0248741034641196.2974221628538.5373111551961222.09899531679994C628.04974828727.90056798080781912437051732201.4118508822L810185.915611686“

现在是一条

曲线

（数据相同）：

d=“M0101.2061594964L272.92537768960784,31.10617276762003L537.0746223103922278.89304686319997L810185.915611686”

如您所见，使用

curveLinear

，路径要简单得多。因此，奇怪的转换是预期的行为

一种可能的解决方案是使用路径插值，正如Mike Bostock在中提出的那样

这是带有路径插值的bl.OCK：

---

PS：如果您希望在加载页面时避免这种奇怪的转换（所有路径都来自左上角），请第一次使用常规的

attr

方法绘制它们。

可能需要更精确一点：该行为是由（隐式）属性引起的使用字符串内插器查找字符串中的数字，并从字符串

a

中的第n个位置内插到字符串

b

中的第n个位置，在没有找到更多相应数字的情况下保持

b

的剩余部分不变。因此，正如您已经注意到的，两个字符串中的数字计数不匹配ngs将导致观察到的行为。谢谢。正如您所建议的，简短的回答是SVG路径元素需要一个自定义插值器。链接到Mike Bostock的path Tween块对于更长的回答非常有用。不过我认为@altocumulus是对的——了解字符串插值器的隐式使用非常有用。