問題タブ [force-layout]

力指向グラフの例に似たものがあります。主な違いは、力がないことです。ユーザーのドラッグ操作を除いて、レイアウトは静的です。ユーザー定義のノードグループの周りに凸包を（svg：path要素として）描画するコードを追加しました。ノードが移動すると（つまり、.on("drag")）、船体を計算するコードが実行されます。つまり、ノードがドラッグされたときに常に起動されます。通常、10から30の船体があります。ノードは1つまたは複数の船体にある場合があります。下記参照：

私は自分がしていることを行うためのより効率的な（より高いパフォーマンスの）方法があるかどうかを理解しようとしています。今のところこれを高レベルに保つ：

ドラッグ時に、すべての船体グラフィックを更新します。

1. 船体ごとに、構成ノードの座標の配列を作成します。
2. 上記の配列の各座標ペアを、元のポイントからr離れた8つのポイントに置き換えます。これは、船体が実際にノードに接触しないように、船体をパディング/拡張するためのものです。
3. 計算された座標をにフィードしd3.geom.hullます。

Chromeで約50fpsを取得していますが、これはまったく悪いことではありませんが、非常に非効率的な設定のようです。

私の唯一の明確なアイデアは、ノードがノード配列に含まれている船体のIDを格納し、すべての船体ではなく、その船体のみを更新することです。また、（パス自体ではなく）船体データを格納するためのより効率的なデータ構造についても疑問に思っています。現在、データ構造は次のようになっています。

自由形式の質問はご容赦ください。しかし、私がよく知らないプログラミング手法がここでうまく機能することを期待しています。

私は現在、どこかから SELECT とどこかへの INSERT を繰り返すだけの前任者によって記述されたバッチ スクリプトの構造を視覚化することに取り組んでいます。ツリー関数を使用しようとしましたが、JSON の同じインデックスにある同じ名前を同じノードとして認識させたい場合に、柔軟に使用できませんでした。

そこで、強制レイアウト機能を使用することに決め、グーグルの助けを借りてほぼ完了しました。ただし、一部を初期化するために同じ領域に同じデータベースまたはスクリプトのグループをマップすることはできますが、何とか force.on("tick", function() ~~ 各ノード間の距離を再計算すると、本当に面倒になりました。これは、ノード間のリンクを表示しません。

JSONを使用してリンクが再計算されている間にレイアウトを固定する方法を知っている人はいますか? 私のコードは次のようなものです：

私は D3 の素晴らしい世界を初めて知りました。

強制指向のレイアウトがあります。強制指向のレイアウトでノード (円) を「ドラッグ」する必要があります。

私はこのコードで試しました：

しかし、これは機能しません...助けてください。

これまで、強制指向グラフで d3.svg.symbol() を使用して、さまざまなノード タイプを互いに区別してきました。

ノードを svg 画像として表示することで、さまざまなノード タイプを区別したいと思います。例の 1 つに従って、次のコードを使用してノード イメージを表示しました。

これはsvg画像を表示しますが、2つの問題があります:

1) 属性に基づいてノード サイズをスケーリングしたい。私が理解していることから、これは「スケール」属性を指定することで実行できます

画像タグ自体または画像を含むグループなどの適切な場所に:

たまたま、scale() 変換によって画像が置き換えられます。画像はもはやエッジの端点ではありません。グラフを初期化するときに画像のサイズを適切に変更するにはどうすればよいですか?

2) グラフをズームすると、Chrome では画像がぼやけますが、Firefox では画像は鮮明なままです (画像)。このぼやけをどのように回避できますか?

編集:デュオピクセルの提案に基づいて、コードは次のようになりました:

問題＃1は解決しますが、2番目の問題は解決しません。

結果の svg 画像には、多くの空のスペースが含まれています (firebug の選択ツールで画像を選択すると表示されます)。画像は Inkscape で作成されたもので、キャンバス サイズは 50x50 にトリミングされており、これは正しい表示ピクセル サイズである必要があります。

私は、ニューヨークタイムズの最終的な政治大会の視覚化のような部分的に塗りつぶされた円を作成しようとしています：http ：//www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html

d3のclipPathsで見つけた2つの最も明確なコード例（https://gist.github.com/1067636およびhttp://bl.ocks.org/3422480）は、クリップパスごとに一意のIDを持つ個々のdiv要素を作成します次に、これらのパスを単一の要素に適用します。

これらの例から、データ値に基づいて要素のセット内の要素ごとに一意の円形のclipPathを使用して視覚化する方法を理解できず、効果を作成できます。

これが私がこれまでに持っているものです：

次の構造のデータが与えられます。

1）データセット内のオブジェクトごとに円で力の図を作成します。円の面積は、オブジェクトの値から導出されます。

2）mbostockの例http://bl.ocks.org/3422480のアルゴリズムを使用して、各データポイントの比率（pctFull）からk（およびh）を計算します。

3）kを使用して、円の適切な領域をカバーする各データポイントの長方形を生成します。

各長方形の可視性をそれぞれの円に制限できれば、イラストは完成すると思いますが、これは私が立ち往生しているところです。私はたくさんのことを試しましたが、どれもうまくいきませんでした。

これがjsfilddleです：http：//jsfiddle.net/G8YxU/2/

私は現在、各ノードが私の Web サイト上の場所である楽しい対話型ナビゲーションのために d3 を使用しています。ウィンドウのサイズを変更するとき、またはユーザーがノードをドラッグするときに、ユーザーがナビゲーションの相互作用を見て楽しむことができることを願っています。

問題は、ノードをクリックすると、現在「アクティブ」なノードを示すようにノードを変更したいということです。ただし、フォース レイアウトで描画を呼び出して変更を誘発するたびに、フォース レイアウトが「小刻みに動き」、すべてのノードの位置が再計算されます。ノードの位置を変更したり、位置を再計算したりせずにノードを変更する簡単な方法はありますか?

d3の力指向グラフの例に検索機能を実装しようとしています。テキストフィールドに検索クエリを入力すると、関連するアイテムが表示され、関連しないアイテムはフェードアウトします。

次のjsfiddleに示すように、メソッドsearchUpdateとcountを実装しました。

アイテムをフェードさせるのに助けが必要です。現在d3.select("svg")、グラフ全体がフェードしますd3.select("#"+n.id)が、エラーが発生します。

d3 を使用して強制レイアウトを作成しましたが、うまく機能します。私の初期データは json ファイルから読み込まれ、グラフはこの d3.js の例と同様の手法で描画されます。

グラフが画面に表示されたので、Web ソケット経由で受け取ったデータからその場でノードを追加、更新、および削除する必要があります。add メソッドと remove メソッドは機能していますが、既存のノードのプロパティを更新する正しい方法が見つかりません。

私が行った読書から、データ ソースを変更し、enter() メソッドを使用してチャートを更新するという正しいテクニックを収集しました。

ノードを更新するには、次のことを行っています。

update 関数は、ノードを次のように更新します。

私はこれに対して正しいアプローチを取っていますか？このコードを試してみると、円に半径属性を設定しようとしたときにデータとして取得したノードは、ノード配列の最後のノードです。つまり、単一のノード オブジェクトではなく、階層ノード データを含むものです。

どんなポインタでも大歓迎です、私はこれにあまりにも多くの時間を費やしました:)

D3 のフォース ダイレクテッド グラフ レイアウトにビヘイビアを追加して、一度ドロップすると、ドラッグ アンド ドロップされた svg ノードがその場所に留まり、グラフで他に何が起こっても位置が変わらないようにしたいと考えています。この API についていくつか読んだことがありますが、それを機能させる方法がわかりません。

私が解決しようとしている問題は、ユーザーが複雑な力のグラフを「選択」できるようにすることです。

D3ライブラリを使用して物理重力のシミュレーションを設計しようとしていますが、あまり運がありません。'layout' APIリファレンスには、物理​​的な重力は正の'charge'パラメーターを介して実装できると記載されていますが、これがどのように機能するかはわかりません。

現時点で実装しようとしているのは、さまざまな速度で上昇し、最終的にビューポートから出ていく複数の可変加重およびサイズのrectを含む単一のSVG要素です。それらの加重は、それらが上昇する速度を定義します。（基本的に、ビューポートの上部を超えてグローバルな引力を実装しようとしています。）

D3フォースレイアウトに従ってこれを行うための実行可能な方法はありますか？概念的な解決策を探していますが、例とコードスニペットも高く評価されています。

前もって感謝します！