0

入力が円（位置と半径）（またはより良い楕円）のリストであり、円の重なりが形状になり、マウスオーバーイベントを適用できるチャートを作成しようとしています。また、ほぼ同じように、円が前面に移動し、マウスオーバー効果があることを望みます

http://benfred.github.io/venn.js/examples/intersection_tooltip.html

オーバーラップのサイズを知る必要はありません。

Ben Frederickson による D3.js ベン図を使用してみました。チャート（選択）機能の一部が理解できませんが、円を入力できるようにして、重なりも含めてきれいに描画されるようにしましたが、これはまだ「データ」を入力として持っていることに依存しています同様に、すべてのセット (jsonp ファイルに表示される) は引き続き必要です。考えられるすべてのセットを一覧表示するスクリプトを作成するだけでよいことはわかっていますが、これは理想的です。

http://www.benfredrickson.com/venn-diagrams-with-d3.js/

コードがこれらのオーバーラップを作成してからセットに割り当てる方法を理解するのに苦労しています。

乾杯、ライアン

4

1 に答える 1

2

各交差点エリアには、「venn.intersectionAreaPath」関数によって計算された SVG パスがあります。円のリストを受け取り、交差領域のパス要素を返します。

円の位置が既にある場合は、ベン図オブジェクトの 'layoutFunction' 属性を次のようにオーバーライドできます。

var circles = [{'x' : 0, 'y': 100, 'radius' : 80},
               {'x' : 0, 'y': 0, 'radius' : 90 },];
var chart = venn.VennDiagram().layoutFunction(function() { return circles; });
d3.select("#venn").datum([{sets: [0]}, {sets:[1]}, {sets:[0,1]}]).call(chart);

これには、描画する可能性のあるすべての領域のリスト (「[{sets: [0]}, {sets:[1]}, {sets:[0,1]}] など) が必要ですが、これはリージョンのサイズを指定する必要はありません。

于 2015-04-05T17:29:10.320 に答える