javascript - D3 バンドル レイアウトでのバンドルのカラーリングの継続的な変更

Question

アロハ、

このビジュアライゼーションでバンドルを作成する可能性はありますか:

...そのビジュアライゼーションのバンドルのように見えます

?

d3でこれを達成する方法がわかりません。

編集 1: 明らかに、カスタム インターポレータを作成する必要があります。バンドル インターポレーターを拡張して、d3 ライブラリを変更せずに 2 つの色をさらに補間するにはどうすればよいですか?

Answer 1

残念ながら、SVG も Canvas も、パスに沿ったグラデーションのストロークをサポートしていません。私の依存関係ツリーの視覚化の実装方法は次のとおりです。各パスについて:

1. 基底スプラインから開始します (階層エッジ バンドルを参照)。
2. 区分的な 3 次ベジエ曲線に変換します ( BasisSpline.segmentsを参照)。
3. 区分線形曲線 (つまり、ポリライン。Path.flattenを参照) に変換します。
4. 等長の線形セグメントに分割します ( Path.splitを参照)。

これらの線形セグメントを取得したら、グラデーションに沿って適切な色を計算して各セグメントに色を付けます。したがって、最初のセグメントは緑で描画され、最後のセグメントは赤で描画され、中間のセグメントはその中間の色で描画されます。等距離点で基底スプラインをサンプリングすることにより、手順 2 ～ 4 を組み合わせることができる場合がありますが、それにはより多くの計算が必要になります。

私の依存関係ツリーは Canvas に実装されていますが、一定の色のセグメントごとに個別のパス要素 (または線要素) を作成することで、SVG でも同じ効果を得ることができます。同じ色のセグメントを組み合わせると、パフォーマンスがわずかに向上する場合があります。