2

任意のノードが他のノードにリンクできる (つまり、定義された階層がない) 有向グラフを描画したいのですが、フォース レイアウト エンジンを使用していましたが、クリック イベント処理をサポートしていません。ノードをクリックして、そのノードを中央に配置し、他のすべてをその周りに配置できるようにしたいと考えています。

D3でそれは可能ですか？

編集: d3.force.layout の API ドキュメントによると:

force.on(型、リスナー)

指定されたリスナーを登録して、強制レイアウトから指定されたタイプのイベントを受け取ります。現在、「tick」イベントのみがサポートされています

これは、クリック イベント ハンドラーを追加するだけでは機能しないことを示唆しています。

また、ツリー レイアウトには (私の知る限り) 階層が必要であり、私のデータはより複雑です。

4

1 に答える 1

2

これに戸惑った後、私が欲しかったものに近いものがあるので、共有します.

まず、レイアウト エンジン用のクリック ハンドラはありませんが、これには必要ありません。ノードをクリックして修正したかったので、ノードにクリックハンドラーが必要です。

次に、強制レイアウト エンジンの d3 API で説明されているノード レベルの「固定」プロパティがあります。

これら 2 つを組み合わせて、ノードの位置をロックまたはロック解除するクリック ハンドラーをノードに追加できます。

ここの例を使用して、CSS に次を追加し circle:hover { fill: red; } 、円の定義を次のように変更します。

var circle = svg.append("svg:g").selectAll("circle")
.data(force.nodes())
.enter().append("svg:circle")
.attr("r", 6)
.call(force.drag);

に

var circle = svg.append("svg:g").selectAll("circle")
.data(force.nodes())
.enter().append("svg:circle")
.attr("r", 6)
.on("click", function(d){ d.fixed = 1 - d.fixed; force.start(); })
.call(force.drag);

そして今、円の上にマウスを置くと、円が赤くなり (キャプチャしたことを示します)、クリックすると所定の位置にロックされます。次に、これを他の円で繰り返して、必要な場所にドラッグします。

于 2012-08-17T19:38:23.410 に答える