0

こんにちは、d3.js ライブラリの力有向グラフの例に取り組んでいますが、すべてのノードの位置を修正したいと考えています。そして、ノードをクリックすると、画像とユーザー（ノード）の情報を表示するポップアップを表示したいと思います。

4

2 に答える 2

1

私は最善を尽くしてお答えしますが、あなたの質問にはカバーすべきことがたくさんあるので、これはより多くの情報を探す場所の概要であり、正しい道を歩み始めるためのちょっとしたヒントです.

見掛け倒しのリンクをお許しください (まだ 2 つ以上は投稿できません...)

ノードは、個々のノードのブール値の「fixed」プロパティを true に設定することにより、位置を固定できます。

次のセクションを参照してください: # force.nodes([nodes]) https://github.com/mbostock/d3/wiki/Force-Layout

ノードをクリック可能にするには、新しいノードをノード選択に追加するときに、イベント リスナーをノード選択にアタッチします。こちらをご覧ください: Github /mbostock/d3/wiki/Selections#wiki-on

各ノードにさらにプロパティを追加するには、そのデータを「ノード」配列内のオブジェクトに追加してから、選択に結合します。

これは、ドラッグ動作を追加する方法と、マウスの「クリック」リスナー イベントを追加してノードを fixed=true と false の間で切り替える方法を示すために編集したものです。より多くのノード情報を表示するために関数呼び出しを行う可能性があります。 https://gist.github.com/alexhornbake/6079321

上記は、次の例を編集したものです。混乱したときは、この例を参照してください。非常に役立つ/シンプルなフォースレイアウトの例: Gist GitHub /mbostock/1095795

于 2013-07-25T13:21:10.913 に答える
0

Alex の回答に追加するために、プロパティnameを各データ値に関連付けたと仮定した簡単な例を次に示します。したがってg、すべてのノードに要素が必要になり、それぞれに aと a のg両方が必要になります。次に、Mike Bostock がここで説明しているように、インデックスまたは値を介して 2 つを関連付けることができます。データは親から自動的に継承されることに注意してください。関連付けられたクリック イベントを使用して、表示または非表示にするクラスをテキストに追加または削除します。これは、circletextselection.classed()

var nodes = d3.select("body").append("svg:g")
                     .selectAll("g.nodeGroup")
                     .data(dataset)
                     .enter()
                     .attr("class", "nodeGroup")
                     .attr("x", function(d) { ...
                          ...
                     .each(function(d) { 
                            d3.select(this).append("circle")
                                    .attr("r", function(p) { return p.value})
                                    .on("click", function(p) {
                                         d3.selectAll("g.nodeGroup text")
                                            .filter(q) { return p.value == q.value}
                                            .classed("show", true)});
                            d3.select(this).append("text")
                                     .attr("text", function (P) { return p.name})
                   });
于 2013-07-25T17:40:10.643 に答える