これらの 2 つの三角形の間に塗りつぶしを作成しようとしています。たとえば、赤と緑の三角形の間に赤い塗りつぶしを作成しようとしています。これを達成する方法を知っている人はいますか？d3 ではなく CSS を使用して塗りつぶしを作成していると思いますが、似たようなことをしていると思われるレーダー グラフの別の例を見たことがあります...
ラジアルチャートを使用してmbostockの回答で上記の問題を解決しました...
最終結果
質問する
6294 次
3 に答える
8
このためのカスタム パスを実装する必要はありません。d3.svg.area.radialパス ジェネレーターを使用できます。周期的なデータをプロットするために使用できる積み上げ放射状面グラフの例を次に示します。
実装は、レーダー チャートとかなり似ていますが、レーダー チャートでは角度ポイントごとにスケールが異なります。
于 2012-07-04T19:03:35.173 に答える
0
Lars が述べたように、SVG Path 要素を作成する必要があります。
パスは、要素のd属性の一連のコマンドによって定義されます。2 つの三角形のうちの 1 つの角に絶対 ("M") を移動することから始めます。次に、最初の三角形の各コーナーに移動するために、lineto (絶対的に「L」、または相対的に「l」) を使用する必要があります。次に、他の三角形に完全に移動し、繰り返します。最後の「z」はパスを閉じます。パスの塗りつぶしを目的の色に設定します。
上記のリンクからの単一の三角形のパスの例を次に示します。
<path d="M 100 100 L 300 100 L 200 300 z"/>
このテクニックを実際に見たい場合は、mbostock がhttp://square.github.com/crossfilter/の棒グラフのパスで使用しています。
于 2012-07-02T23:58:44.223 に答える