問題タブ [force-layout]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
4 に答える
7000 参照

c++ - C++での力指向レイアウトの実装

GUIに使用されるC++での力指向レイアウトのオープンソース実装を知っていますか?できればBSD/MIT / Apacheまたは他の(非GPL)ライセンス。

0 投票する
1 に答える
11359 参照

javascript - d3-js の Force-Directed Layout はイメージをノードとしてサポートしますか?

d3にはForce-Directed Graph Layout のデモがあります。

円の代わりに、グラフ内のすべてのノードを画像にしたいと考えています。

だから、私は変わりました

しかし、私は画像を見ることができません。私は何を間違っていますか?

0 投票する
1 に答える
2120 参照

d3.js - Javascript D3 ビジュアライゼーション クアッドツリーを理解する

私はD3 視覚化ライブラリ(http://mbostock.github.com/d3/)を使用して理解しようとしています。力指向のコードを見ていると、クアッドツリーを使用して粒子にかかる力を計算しているようです。 . コードは

quad.count は quadtree ノード内のパーティクルの数です。しかし、https://github.com/mbostock/d3/blob/master/d3.geom.js#L696のquadtree コードを見ると、 への参照が見つかりません。また、その計算方法もわかりません。おそらく各ノードの「重量」または「料金」を変更するためにいくつかのことを変更したいので、私は尋ねます。count

0 投票する
2 に答える
1502 参照

javascript - JavascriptD3レイアウトシミュレーションを動的に変更する

https://github.com/mbostock/d3/blob/master/examples/force/force-multi-foci.htmlのD3の例で、シミュレーションの詳細を動的に変更しようとしています。チェックボックスを入れて、次のようにティックハンドラーを動的に割り当てます(完全なコードはhttp://pastebin.com/k4P0uzHKにあります):

しかし実際には、最初に与えられたハンドラーだけが機能するようです。シミュレーションを動的に制御する方法はありますか?

0 投票する
5 に答える
13499 参照

javascript - 大規模なデータセットを使用すると、D3強制レイアウトの視覚化が非常に遅くなりますか?

d3.jsを使用して、50K ノードで構成されるグラフの強制指向レイアウトを生成しています。5K 未満の場合、ライブラリは驚異的に機能します。json ファイルをロードするように参照を変更して、 d3.js の例のページからそのまま例を使用しています。

レンダリングを高速化するためのヒントはありますか? 他の代替案があれば、それも良いでしょう。

0 投票する
6 に答える
44222 参照

javascript - D3力レイアウトグラフにズームインする方法はありますか?

D3には、ここに力指向のレイアウトがあります。このグラフにズームを追加する方法はありますか?現在、マウスホイールイベントをキャプチャすることはできましたが、再描画関数自体を作成する方法がよくわかりません。助言がありますか?

0 投票する
2 に答える
2935 参照

javascript - javascript/d3 で強制的にレイアウトされた Beeswarm プロット

これは、R で beeswarm プロットを作成することに関する記事です。

beeswarm plot の R パッケージもあります。次の 2 つの図は、そのパッケージが提供するいくつかの可能性を示しています。

ここに画像の説明を入力

ここに画像の説明を入力

ただし、私は現在、d3.jsの強制指向レイアウトを使用して作成しようとしています。

私の計画は、カスタム重力でポイントを垂直線とその適切な y 値に向かって引き寄せ、衝突検出でポイントを互いに離すことです。

私は半作業プロトタイプを持っています:

ここに画像の説明を入力

残念ながら、私は 2 つの問題を回避する方法を見つけることができません。これらは実際には同じ問題であると思われます。

  1. 私のポイントは、少なくとも少しは重複し続けます。

  2. ポイントがレイアウトの中央に積み上げられた後、反衝突力と「中心に来る」力が戦うため、進行中の「シャッフル」があります。

ポイントがどこに住むべきかについてかなり早く合意に達し、重複しないようにしたいと思います。

私が使用している強制コード (bl.ocks.org ではなく、ここで見たい場合) は次のとおりです。

これは、フォース指向のレイアウトへの私の最初の進出です。

0 投票する
1 に答える
6442 参照

text - ノードの代わりにテキストを使用する D3 力有向グラフ

オリジナル: http://mbostock.github.com/d3/ex/force.html

上記のリンクで提供されている彼の例では、代わりに円ノードをそれらの名前に置き換えようとしています。D3 や js/jquery についてはよくわかりませんが、それがどのように機能するかを理解しようとしています。

ノードを svg:text に置き換えることはできましたが、そうすると、ノードが開始する場所に「スポーン」するだけで、アニメーション化されません。

ここでグループを使用する必要があるかどうかわかりません。もしそうなら、方法を教えてください。

これまでのところ、これは私の変更されたコードです:

0 投票する
2 に答える
19168 参照

javascript - D3JavaScriptライブラリでクリックイベントを取得できません

D3 JavaScriptライブラリを使用して、データを力指向マーカーとして表示しています。正常に動作します。しかし、クリックイベントをサークルに追加できません。そのため、円をクリックすると、円の詳細な分析が表示され、モーダルボックスに表示されます。

に追加.on("click", 'alert(\'Hello world\')')してみましたvar circle。期待どおりに動作しません。クリックする代わりに、ロード時にアラートを出します。

助けてくれてありがとう

0 投票する
5 に答える
33051 参照

svg - D3 力有向グラフのリンクにテキスト/ラベルを追加

私は変更された力有向グラフに取り組んでおり、リンクがノードに正しく配置されていないリンクにテキスト/ラベルを追加する際に問題が発生しました。修正方法は?

SVG テキスト要素にイベント リスナーを追加するにはどうすればよいですか? 追加する.on("dblclick",function(d) {....}だけでは機能しません。

コード スニペットは次のとおりです。