2

サンバースト ダイアグラムに基づいて d3 ビジュアライゼーションを実装しようとしていますが、
http : //tributary.io/inlet/4127332/ で動作しているほぼ完璧なオンラインの例を見つけました。

ここに画像の説明を入力

私の主な問題は、テキストをセグメントにクリップする必要があることです。svg クリップ パスを使用してみましたが、私の貧弱な d3 スキルが私を失望させました。これに関する任意の助けをいただければ幸いです。

4

1 に答える 1

3

したがって、テキストをクリップする最初の試みは機能しませんでした。これは、アークジェネレーターを使用している場合、アークの座標空間がテキストの座標空間と一致しないためだと思います。

ノードごとに作成したグループにクリップを適用すると、魅力的に機能することがわかりました。注意点が1つありました。クリップ パスを生成して適用しようとすると、ノードが要素に結合される順序が異なり、間違ったパスが間違ったテキストをクリッピングしていました。各データ要素に id を追加することで、これを回避しました。ここで最終版を見ることができます

重要な部分は、クリップ パスを追加することです (新しい id フィールドの使用に注意してください)。

svg.append('defs')
   .selectAll("clipPath")
   .data(partition.nodes)
   .enter().append('svg:clipPath')
   .attr('id', function(d,i) { return d.id;})
   .append('path').attr('d', arc);

次に、ノード グループでそれらを参照するだけです (ここでも ID を使用します)。

group = 
   svg.selectAll("g")
   .data(partition.nodes)
   .enter().append('svg:g')
   .attr('clip-path', function(d,i) { return 'url(#' + d.id + ')';});

支流では、「defs」ノードが通常の場所 (svg タグの後) に表示されるように、svg データ結合を最初に配置しましたが、これは技術的に必要ではないと思います。

于 2013-03-19T21:16:51.683 に答える