使用D3.js在曲線類型之間切換

我想使用D3.js在曲線類型之間切換。使用D3.js在曲線類型之間切換

看看this block。數據保持不變，但曲線類型改變。我期待着能夠在飛機上保持他們的近似位置的路徑 - 畢竟數據保持不變 - 但他們不這樣做。雖然我不明白爲什麼有基礎線性的路徑似乎從左到右重新繪製，而線性到基礎路徑似乎是從右向左重新繪製的路徑似乎重繪。

我已閱讀Mike Bostock的帖子Path Transitions，但我認爲這是一個稍微不同的問題。在那裏，數據改變但曲線類型保持不變。在這裏，數據保持不變，但曲線類型改變。

在此先感謝您的幫助！

來源

2017-07-31 Iain Dillingham

要理解爲什麼你有這樣一個奇怪的過渡，讓我們比較使用curveBasis和curveLinear路徑的d屬性。

首先，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方式簡單。所以，奇怪的轉變是預期的行爲。

可能的解決方案是使用路徑插值，如Mike Bostock的this code中提出的。

這是一個帶路徑插入您的bl.ocks：http://blockbuilder.org/anonymous/02125b1fb145a979e53f369c4976a772

PS：如果你想避免這種奇怪的轉換時加載頁面（所有路徑從左上角推出），吸引他們的第一時間使用常規attr方法。

來源

2017-07-31 12:13:25

它可能值得更精確一點：行爲是由字符串插值器（'d3.interpolateString（a，b）']的（隱式）使用引起的（https://github.com/d3/ d3-interpolate＃interpolateString），它可以找到字符串中的數字，並從字符串「a」中的第* n *個位置插入字符串「b」中的第* n *個位置，如果不存在，則保留「b」的其餘部分找到更多相應的號碼。因此，正如您已經注意到的，兩個字符串中的數字不匹配都會導致觀察到的行爲。 – altocumulus

謝謝。正如您所建議的那樣，簡短的答案是SVG路徑元素需要自定義插值器。鏈接到Mike Bostock的Path Tween塊對於更長的回答非常有用。我認爲@altocumulus是正確的 - 知道隱式使用字符串插值器是有用的。 –

使用D3.js在曲線類型之間切換

回答

相關問題