使用D3.js

Question

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

看看this block。数据保持不变，但曲线类型会发生变化。我期待着在飞机上保持近似位置的路径 - 毕竟数据保持不变 - 但他们没有。这些路径似乎是重新绘制的，虽然我不明白为什么基于线性的路径似乎从左到右重绘，而线性路径似乎是从右到左重绘。

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

提前感谢您的帮助！

Answer 1

要理解为什么会有这样的奇怪的过渡，请使用d和curveBasis来比较路径的curveLinear属性

首先，curveBasis：

  

d =＆＃34; 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＆＃34;

现在是curveLinear（相同数据）：

  

d =＆＃34; M0,101.2061594964L272.92537768960784,31.10617276200003L537.0746223103922,278.89304686319997L810,185.915611686＆＃34;

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

一种可能的解决方案是使用路径插值，如Mike Bostock的this code所述。

以下是带有路径插值的bl.ocks：http://blockbuilder.org/anonymous/02125b1fb145a979e53f369c4976a772

PS：如果您想在加载页面时避免这种奇怪的转换（所有路径都来自左上角），请使用常规attr方法首次绘制它们。