問題タブ [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 に答える
1249 参照

javascript - D3.js と相互作用する力

粒子が「焦点」に向かって移動するときに、粒子にかかる重力を「シミュレート」しようとしています。実際には、次のコードを変更して、粒子が青色のノードに向かう途中でオレンジ色のノードによってコースからわずかに外れるようにしようとしています。私の問題は、D3.js 強制指向レイアウトを使用してこれを概念化するのに問題があることです。これはかなり漠然とした質問だと思いますが、どんな助けでも大歓迎です! 画像とコードは次のとおりです。

ここに画像の説明を入力

1 http://jsfiddle.net/fbW7T/1/ -- 以前。

[2] http://jsfiddle.net/fbW7T/2/ -- その後、Lephix の提案で。

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

javascript - d3 力有向グラフで曲線を使用

d3 force レイアウトを介していくつかのデータを視覚化したいと考えています。

ただし、ノードを結ぶリンクは直線です。ただし、データには 2 つのノードを接続する複数のエッジがある場合があります。したがって、強制レイアウトの直線は、それらすべてを正しく表示することはできません。行ではなくリンクにパスを追加しようとしました。しかし、うまくいきませんでした。それが間違った方法で使用していたのか、強制レイアウトがパスをリンクとして受け入れないためなのかはわかりません。

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

javascript - D3 フォース レイアウト リンク マーカーの矢印のスケーリング

リンクのサイズとそれに関連する矢印のサイズを値 (1 ~ 3) に基づいて変更しようとしている d3 強制有向グラフに次のコードがあります。ストロークの太さは値によって変化しますが、矢印は正しい位置に留まりません。ストロークの太さが 1 から 3 に変わると、端から後ろに移動する傾向があります。ストロークの値を変更するときに矢印 (マーカー) を適切に整列させる方法についてのアイデアはありますか? どうもありがとう!

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

javascript - svgの外側のボタンからd3のノードをクリックする

D3を使用して力指向グラフを作成し、通常のdivでノードのIDを表示しました。divでIDがクリックされたノードを強調表示する必要があります。ノードのIDを検索し、通常のJavaScriptを使用してクリックしようとしましたが、機能しません。

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

javascript - d3.jsを使用した強制レイアウトでのノードの追加と削除の問題

Zabbix APIからデータをフェッチすることで、サーバーの可用性(および、これが機能した後は他のこと)を視覚化しようとしています。返されるデータが[ここ][1]のように見える例は、ZabbixAPIドキュメントで確認できます。

データの取得は問題ではありませんが、d3.jsのデータの結合に問題があります。つまり、これをどのように行うのかということです。

データをフェッチした後、アルファベット順に並べ替えられたサーバーの配列を取得します。新しいサーバーを表示し、削除されたサーバーを削除し、可用性の変更(または将来的には)を色などで反映させます。考えるかもしれません。

重要なのは、グラフを再初期化するのではなく、ノードを追加または削除するだけでグラフを更新する必要があるということです。

これは私が問題を抱えているビットです。リストにノードをどんどん追加して(クリアすることはありません)、新しいデータをフェッチするたびにノードを「再描画」することができました。つまり、すべてのノードが再度追加され、それらのように中央にスナップします。最初にページをロードするときに行います。

そして、すべてのノードが左上隅でスタックする結果となった3番目。

後者は私のコードの現在の状態です。

私はこの時点で何が間違っているのか少しわかりません。とにかくリンクがなくても、必要なものにかなり近いように見えるこれを見ていました(今のところ)。これは正常に機能し、コードでその動作を再現しようとしましたが、機能しません。

誰かが私のためにいくつかのポインタを持っていれば、それは素晴らしいことです。私はこの1週間、これ以上仕事をすることなくこれで遊んでいます:)

ありがとう!

職場ではZabbixにしかアクセスできないため、実際にテストできるのはCET時間の16〜21時間で、これは今日さらに約4時間です。誰かが夜中に何か提案があれば、私は明日それを試してみます:D

GitHubの私のコードは、私の投稿の下のリンクにあります。このサイトでのこの評判の欠如により、私の投稿に2つのリンクしか追加できない暗い穴に私を入れてしまったからです。

なぜこれはグローバルではないのですか?他のSEサイトに10人以上の担当者がいます。

編集:

まだ問題がありますが、データが更新されるたびに、最初にロードしたときと同じように円が「入り」ます。http: //mbostock.github.com/d3/talk/20111018/collision.html 今何をすべきかわからない: //

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

database - 深くトラバース可能な自己中心的なグラフのキャッシング戦略

まず、私が構築しているものを説明しましょう。

  • D3.js Force Layout グラフがあり、これは中心に根ざし、その周りに多数のノードが広がっています。中央のノードはある種のエンティティであり、その周りのノードはルートに何らかの形で関連している他のエンティティです。エッジは実際の関係 (つまり、2 つの関係) です。

  • 外側のノードをクリックして、ターゲット エンティティを中央に配置し、その関係をロードできます。

  • このグラフは、ノードをクリックするたびに中心になり、それ自体に直接関係する関係のみが表示されるという意味で「エゴセントリック」です。

私のセットアップ、それが重要な場合に備えて:

  • Node.js を介して API を提供しています。この API は、リクエストを巨大なデータ セットを持つ CouchDB サーバーへのクエリに変換します。

  • レイアウトには D3.js を使用し、jQuery と Bootstrap 以外のクライアント側ライブラリは使用していません。このキャッシュタスクに役立つものがあれば、提案を受け付けています:)

私のアイデア:

  • 毎回グラフのいくつかのレベルを簡単に取得できます (子をリストして展開するプロセスを数回繰り返します)。ルートにロードされたデータ。これは完全な無駄のように思えますが、実際には方向への一歩です。この方法でさらに多くの処理を行うことになります!

  • 取得済みのエンティティのハッシュ テーブルを簡単に維持し、そのエンティティのデータをサーバーに要求する前にリストを確認できます。実装するキャッシュ戦略に関係なく、おそらくこれを行うことになるでしょう。これは、クエリを減らすための非常に簡単な方法だからです。

では、このデータをキャッシュする方法を教えてください。

この種のキャッシングを行うために考えられる非常に効果的な戦略はありますか? サーバー側とクライアント側の両方のオプションは大歓迎です。このプロセスには大量のデータが含まれており、クエリや処理を少しでも減らすことで、私は何マイルも先を行くことができます。

ありがとう!

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

javascript - ノードのセットとそれらの間の関係を強調表示する

D3 を使用して力有向グラフに取り組んでおり、グラフに表示されるすべてのノードをグラフ領域の横の別のテーブルに表示しています。表示しているテーブルにチェックボックスがあり、ノードを選択するオプションがあります。

ノードとそれらの間の関係を強調しようとしています。この例からポインターを取得しています選択したノード、そのリンク、およびその子を D3 強制有向グラフで強調表示します。この例は 1 つの特定のノードとその子を対象としていますが、それらの間に何らかの関係がある場合は、複数のノードを強調表示しようとしています。

これに関するヘルプは本当に役に立ちます。

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

javascript - d3.js force-layout でノードを配置する際の問題。各データ更新を「再入力」するノード、内部の例

数日前にこの質問をしましたが、例がないと説明が難しいため、paxRoman 以外の誰も私が尋ねていることを実際に理解しているとは思いません。

しかし、何が問題なのかを突き止めることができたので、コードを bl.ocks.org に載せることができたので、私の言いたいことの例を見ることができます!

例を次に示します: http://bl.ocks.org/3020018

データが更新されるたびに (この例では、json ファイルから読み取られるだけです)、すべてのノードが再作成され、図面に再追加されます。

私がしたいこと

ノードをまったく移動せずに更新したい。

新しい配列に新しいノードが存在する場合は、現在のように表示されます。以前の配列に存在するが新しいノードに存在しない場合は、単純に消えます。

例に見られるように、それは起こっていることではなく、私はこの 1 週間、その理由を理解できませんでした。

だから私の質問は:

私は実際に何を間違っていますか?私のリンク不足ですか?何が問題ですか?私たち 2 人は昨日これを見て 1 時間以上費やしましたが、意味がわかりませんでした。

私の古い質問/投稿はまだ残っていますが、定式化が不十分で、示す例がありませんでした。

私を助けてくれてありがとう :)

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

d3.js - D3フォースレイアウトセンターの幅制限

私はD3を始めたばかりで、現在5つの異なる中心を持つ力のレイアウトがあり、データプロパティに基づいてノードがそれぞれの周りを重力で移動しています。理想的には、5つのグループのそれぞれに同じ数のノードがあり、ほぼ均一な幅の列として表示されます。この例のオレンジ色のグループと同様ですhttp://bl.ocks.org/1021953(その間)。

私のグループには多くのノードがあり、ノードがないものもありますが、その結果、一部のクラスターは他のクラスターよりもはるかに広くなっています。ノードが中心の上下でより自由にドリフトできるようにしながら、ノードが中心の左右にドリフトしない最大幅を設定することは可能ですか?

または、各グループの間に非表示のノードの列を配置して、それらを適切に撃退することで、それを偽造できますか?

どんな助けでも大歓迎です!

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

javascript - d3のイベントをドラッグするための2つの「呼び出し」

私はd3で力指向のレイアウトを使用していますが、開発中に少し問題が発生しています。

基本的に、force.dragで定義された「ドラッグ」動作にイベントリスナーを追加したいと思います。つまり、ノードがドラッグ時に(マウスオーバーではなく)色が変わることを確認したいと思います。これを行うために私が考えることができる唯一の2つの方法は、force.drag関数を何らかの方法で変更するか、新しいドラッグ動作を定義することです。

最初の方法でそれを行う方法はわかりませんが、この2番目の方法で試した場合、メソッドチェーンは、最初のforce.dragイベントを無視して、2番目のドラッグイベントのみを取得します。

別のドラッグイベントリスナーをアタッチするか、既存のforce.dragを変更して、追加する新しいアニメーションに対応するにはどうすればよいですか?

前もって感謝します