不斷變化的包着色在D3包佈局

Question

阿羅哈，

是否有可能使束在this可視化：

...看起來就像在that可視化

束

？

我不知道如何在D3來實現這一目標。

編輯1： 很顯然，我必須寫一個自定義的內插器。如何在不改變d3庫的情況下擴展束插補器以在兩種顏色之間插補？

Answer 1

不幸的是，SVG畫布或支撐撫摸沿路徑的梯度。我的dependency tree visualization的實現方式如下。對於每條路徑：

1. 以基本樣條開始（請參見Hierarchical Edge Bundling）。
2. 轉換爲分段三次Bézier曲線（參見BasisSpline.segments）。
3. 轉換爲分段線性曲線（即，折線;參見Path.flatten）。
4. 拆分爲等長線性段（請參閱Path.split）。

一旦你有了這些線性片段，就可以通過沿着漸變計算合適的顏色來爲每個片段着色。因此，第一個段被繪製爲綠色，最後一個段被繪製爲紅色，並且中間段用中間的某個顏色繪製。通過在等距點對基本樣條進行採樣來組合步驟2-4可能是可能的，但這將需要更多的數學。

我的依賴關係樹在畫布實現，但你可以通過創建時時彩的每一段不同的路徑元素（或線單元）實現SVG同樣的效果。通過組合相同顏色的片段，您可能會獲得稍好的性能。