問題タブ [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 投票する
3 に答える
5096 参照

javascript - ラベル付きの d3.js 強制折りたたみ可能

再作成しようとしても問題があります

http://bl.ocks.org/950642の機能をhttp://mbostock.github.com/d3/talk/20111116/force-collapsible.htmlに追加しようとしました

そしてやろうとした:

ただし、その結果、円が消え、すべてのテキストが左上隅に集まります。

私が間違っているかもしれないアイデアはありますか?これが私のJSです:

ここにjsfiddleがあります:.jsonファイルが原因で、何らかの理由で機能していません...

http://jsfiddle.net/vMw2N/5/

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

javascript - d3js強制レイアウトは、ノードごとに画像または円を動的に追加します

私は D3JS を初めて使用します。ノードごとに画像または円の両方を含む強制レイアウトを作成する必要があります。つまり、Image ノードまたは Circle ノードが動的に追加されます。これは可能ですか?例があれば回答してください

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

javascript - d3 力有向グラフのノードを円、多角形、または雲で囲む

グループ化されたノードを持つd3強制有向グラフを作成しました。グループを雲のような構造で囲みたいと思います。これどうやってするの?

グラフの Js Fiddle リンク: http://jsfiddle.net/Cfq9J/5/

結果は次の画像のようになります。

ここに画像の説明を入力

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

javascript - D3セレクティブズーム

選択可能なリンク/ノード、ツールチップ、魚眼効果、そして-私の質問にとって重要な-ズームとパンなど、いくつかの追加機能を備えた力指向グラフレイアウトに取り組んでいます。

これで、ズームは次のように非常にうまく機能します。

再描画関数は次のようになります...

ただし、この方法では、フォントサイズ、グラフのエッジ、ノードを囲む線のストローク幅などを含むSVGグラフィック全体がズームされます。

特定の要素をズームしないことはどういうわけか可能ですか?私がこれまでに見た唯一の解決策は、このような行を置くことです(ここからそれを取りましたhttp://jsfiddle.net/56RDx/2/

再描画メソッドでは、基本的に特定の要素のズームをオンザフライで反転します。ただし、私の問題は(これが醜いハックであることを除けば)、グラフ描画時にエッジ幅が動的に生成されるため(一部のグラフプロパティに従って...)、この「反転」メソッドが機能しないことです...

0 投票する
0 に答える
2340 参照

javascript - d3.js 強制レイアウト グラフの開始時に「未定義のプロパティ '重み' を読み取れません」エラー

私のプロジェクトでは、次のデータで d3.js 強制レイアウトを使用してグラフを描画したいと考えています。

このデータは、この形式で動的に準備されています。関数が呼び出され、「未定義のプロパティ 'weight' を読み取れません」というエラーがスローされました。この関連する質問は役に立たなかったので、このエラーを防ぐにはどうすればよいですか。また、リンク配列が空であるか、一部のリンクが削除されているか、「miserables.json」をデータとして使用すると、以下の javascript が正常に動作します。

助けてくれてありがとう:D

0 投票する
3 に答える
4529 参照

javascript - D3.jsは力指向グラフにどのアルゴリズムを使用しますか?

ライブラリで力指向グラフ機能を実現するためにD3が使用するアルゴリズムを正確に知りたいと思います。Kobourovの力指向グラフの歴史の要約を読んだことで、ライブラリで使用されている正確なアルゴリズムまたは方法(アルゴリズム/ヒューリスティックの組み合わせ)が何であるかについて少し戸惑いました。

D3 APIリファレンスによると、バーンズハットアルゴリズムを使用して、物体に作用する電荷、O(N * log(N))演算を計算します。Kobourovの記事では、Quigley-Eadesアルゴリズム、およびHuのアルゴリズムは、Barnes-Hutを利用するマルチレベルアルゴリズムであると述べています。それらの1つはD3で何らかの方法で利用されていますか?

API wikiはさらに、粒子の位置決めにVerlet統合が使用されると述べています。ソースコードにはGauss-Seidelアルゴリズムが記載されており、HuのアルゴリズムとDwyerのグラフレイアウトペーパーの両方に記載されています。私が答えを探している質問は、D3が利用する「統合」アルゴリズムです。Kobourovの記事にはいくつかのリストがあり、D3の力による機能はそれらのいずれにも直接適合しないようです。

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

javascript - リンクのないノードの d3 js フォース グラフをチェックして削除するにはどうすればよいですか?

各ノードがリンクされ、孤立したノードがないように、ノードを管理下に置きたいと思います。

私のスクリプトは、json クエリから 30 秒ごとに新しいノードのペアを追加します。新しいノードのいずれかが既存のノードの複製である場合、グラフは一意のノードでのみ更新され、それを他の既存のノードにリンクします。

これが進行している間、グラフ上に最大 10 個のノードを保持するために、最も古いノードからシフトオフしています。ここで問題が発生しているようです。ノードを削除するにはどうすればよいですか? また、他にリンクされていないノード (ストラグラー) を確認して削除するにはどうすればよいですか?

このスクリプトは、新しいノードの追加に関する knoren の投稿に基づいています。

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

d3.js - ForceLayoutからのパスをClipPathとして使用する

強制レイアウトのいくつかのポイントに基づいてボロノイパスを生成しています。これらのパスを10個のクラスのうちの1つにランダムに割り当ててから、これらのクラスの一部をclipPathでラップして、別の要素に適用できるようにします。

追加ではなく、d3を使用して要素の周りにsvgタグをラップすることは可能ですか?

または、clipPathでd3によって生成された複数のパスを使用することも可能ですか?

ご協力ありがとうございました、

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

d3.js - 基になるデータが変更されたときに D3 強制レイアウトの要素を更新する方法

フォース レイアウトの例 ( http://bl.locks.org/1153292 ) の 1 つを使用して、Web サイトにネットワークを表示しています。

ユーザーがいつでも表示するリンクの種類を選択できるようにします。リンク タイプ A を表示することを選択し、リンク タイプ B を追加してからリンク タイプ A を削除すると、タイプ B の残りのリンクが A 色で表示されることに気付きました。

これは、SVG ダイアグラムにリンクを追加するために実行されるコードです。this.linksリンクを追加および削除して配列を変更しています。ご覧のとおり、クラス属性を設定しましたが、更新されていません。リンク A のタイプのままです。

私は現在、 tick 関数内の class 属性を更新することでこの問題を回避していますが、もちろんこれは多くの不要な作業を引き起こします。

enter操作は、既存の要素と新しい要素のマージされた選択を返すため、attr操作は既存の要素を更新して新しい要素を設定する必要があることを読みました。

私は何が欠けていますか?

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

javascript - d3.js強制レイアウト増加linkDistance

ノードの配置に影響を与えずに linkDistance を増やす方法、

例: http://mbostock.github.com/d3/talk/20110921/force.html

円の半径とlinkDistanceを大きくしようとすると、崩壊します