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

d3.js - d3.js の円が重ならないようにする

このブロックhttp://bl.ocks.org/3012590を見ると、パリには地理的に参照されている多くのポイントがあり、小さいポイントの上に大きな円があることがわかります。

ここに画像の説明を入力

http://vallandingham.me/vis/gates/に似たものを取得して、円が境界線に密接に追加されるようにしたいと思います。

ここに画像の説明を入力

申し訳ありませんが、このコードで答えが見つかりませんでした。何か足りないと思います。

それを取得するための簡単な修正はありますか?さまざまな負の電荷の力を試してみましたが、円のサイズが変わると問題が発生します (パリのすべての円が小さくなった場合、それらは互いに離れすぎます)?

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

graphics - d3.js:強制レイアウトのノードとリンクの両方を手動で定義すると、「未定義のプロパティ「重み」を読み取れません」

この方法で、ノードとリンクの両方を同時に設定してみました。

接続されていない可能性のあるデータがあるため、すべてのノードがレンダリングされるようにノードを定義する必要があります。そして、ジャンルの定義は非常に簡単です。しかし、このエラーが発生します。

そして、.links(connections)をコメントアウトすると、グラフがレンダリングされます(ドットの束が散らばっています...)d3と連携するための接続/リンクを取得するにはどうすればよいですか?

ドキュメントを読んでいたところ、ソースとターゲットはノード配列内のノードのインデックスである必要があるようです。それを変える方法はありますか?だから、配列にあるインデックスではなく、ノードの名前を使用できますか?

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

d3.js - d3.js: 強制レイアウトでの推奨ノード位置

ノードが提案された位置を持つグラフを作成したいと思いますが、強制レイアウトを使用してノード自体が重ならないようにしたいと考えています。これはd3で可能ですか?

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

json - 動的jsonデータからの力指向グラフのリンクの更新

私はD3を初めて使用し、jsonデータが動的である力指向グラフに取り組んでいます。新しいデータを受け取ったときに力のグラフを変更することはできますが、それはスプリング効果で発生します。フォースグラフを作成するコードは次のとおりです。

関数全体を再度呼び出すことで、新しいjson文字列を受信したときに新しいグラフを作成できます。これにより、古いグラフの代わりに新しいグラフが作成されます。値を受け取ったときに、古いグラフを新しい値のセットで更新できません。グラフのノードは変更されず、ノード間の関係が変更されるだけです。

新しいノードが削除されて再作成される例(http://bl.ocks.org/1095795 )に出くわしましたが、実装は少し異なります。

どんなポインタや助けも本当にありがたいです。

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

d3.js - D3.js 視覚化ライブラリで強制レイアウトを作成する

私は書籍間の参照を視覚化するプロジェクトに取り組んでいます。私はJavascriptの初心者です。そのため、D3.js API リファレンスを読んでもあまり理解できませんでした。このコード例を使用しました。これはうまく機能します。

私のCSVファイルの構造は次のようなものです:

ソースとターゲットはリンクで接続されています。レイアウトのポイントは次のとおりです。

  1. ソース ノードとターゲット ノードにそれぞれ 2 つの異なる円を作成します。

  2. ソース ノードとターゲット ノードに特定の色を設定します。

  3. 円は本の情報でラベル付けする必要があります。たとえば、ソース ノードは「book 1」でラベル付けされ、ターゲット ノードは「book 2」でラベル付けされます。

  4. ターゲット間にリンクがある場合は、この特定のリンクをソースからターゲットへの他のリンクよりも広くします。

これらのポイントを作成することで、あなたが私を助けてくれることを願っています.

前もって感謝します。

よろしくアイネイアス

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

javascript - d3 arrows in Force Directed Graph

I am puzzled. Why by simply copying and pasting the example http://bl.ocks.org/1153292 the arrows do not align. (see below)

enter image description here

UPDATE: it works in chrome and safai but not in Firefox... even more puzzled. Any ideas?

What would you change in the example to get straight lines instead of curves?

Thanks.

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

graph - D3.js強制レイアウト:ノードグループを分離する方法は?

私は何を達成しようとしていますか?

各ルートがメインルートであるか、別のツリーの葉の子孫であるツリーのような構造で、ノードのグループを持ちたいと思います。

以下に示すものを生成するのは簡単ですが、私が本当に見たいのは、各ルートの周りの完全な円です。ただし、ノードは互いに反発しているため、各クラスター間に以下のギャップが存在します。解決策は、異なる根から来る葉の間の電荷によって引き起こされる反発を無視することであると思います

ここに画像の説明を入力

私のアイデア

  • 各根の周りにある種の半径を設定し、その半径を超えるすべての方向で他のノードを反発させ、葉がその中で円形になるようにします
  • linkDistances と linkStrengths を使用して、クラスターが大きく相互作用しないように何らかの方法で配置します。

これは可能ですか?

私の漠然としたアイデア以外に、これを行う方法が本当にわかりません!

D3 のドキュメントを読むと、動的な linkDistance および linkStrength メソッドとは異なり、ノード チャージの操作は普遍的であることがわかりました。

この声明が真実である場合、誰かが私を正しい方向に導くことができますか?

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

json - リンクデータのみから力指向グラフを構築する

私はd3.jsに少し慣れていませんが、かなり楽しんでいます。これまでのところ、そこにある多くの例やチュートリアルに非常に近い力指向グラフを実装しました。

直接の懸念

多くの例のように、私は次のようなJSON構造を持っています。

ただし、次のようにデータソースを作成する方が簡単だと思います。

グラフでノードを明示的に定義する代わりに、リンク構造で暗黙的に定義されます。

理由

誰かが私が知らない特定のサンプルコードまたはこれを行うための慣用的な方法を持っていた場合に備えて、プロジェクトの最終的な目標をリストしたいと思いました。

プロジェクトの目標は、最終的にはリアルタイムで更新されるグラフになります。バックエンドは開発中であり、変更や改訂が行われる可能性があります。

現時点では、更新JSONフィードをX秒ごとにプルダウンし、そのグラフの構造を新しい情報で更新することを想像しています。プルされたフィードには、グラフの更新された構造のみが含まれるため、スクリプトは、既にプルされたノードとリンクをすべて維持し、必要に応じて新しいものを追加する必要があります。

ありがとう!

これまでに質問されたことがある場合は、お詫び申し上げます。検索しても何も見つかりませんでした。私がそれを逃したならば、私を侮辱し、殴打してください。

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

d3.js - 有向力グラフでノードをインタラクティブに修正

私は現在、かなり単純ですが、大きな力指向のグラフを使用しています。ユーザーがその時点で適切と思われる方法でグラフを整理できるようにしたいと考えています。これを行うには、ノードの位置をインタラクティブに修正できるようにします。ノードをロックする方法は私次第です。ノードをダブルクリックするか、ノードをマウスオーバー/グラブしながらキーを押すことを考えています。

私はこれを行う方法がわからず、例を見つけることができません。いくつかの支援をいただければ幸いです。

どうもありがとうございます。

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

json - 強制レイアウト用の json データからのノード生成

Mike Bostock のようなバブル チャートを作成しようとしています。

ここに画像の説明を入力

ただし、ノードをランダムに生成するのではなく、json 用に生成したいと考えています。有効な JSON である変数があるとします。この変数から、強制レイアウトに使用できる変数datasetを生成するにはどうすればよいですか。nodes

Mike の実装 (ランダムに生成された円の場合) は次のとおりです。

私のdatasetJSONが次のようなものだとしましょう:

sizeそして、各円の半径をJSON 配列内の各オブジェクトの半径にしたいと考えています。