問題タブ [force-layout]

これを使用したい ( http://vallandingham.me/vis/gates/ ) バブル チャート (D3 で作成):

...いくつかの異なるシナリオを説明します。要するに、選挙データを可視化したい。政党は何票を獲得しましたか?また、政府を形成するためにどのようなシナリオが可能ですか?

データ レベルでは、非常に明白です。名前、議会の議席数、州 1、州 2、州 3 などです。州 1 は 1 または 2 です。1 は政府の場所、2 は野党です。かなり簡単です。

ただし、この例では、All Grants と Grants By year の 2 つの状態しか示していません。私が望むのは、Grants By Year のような州が増えることです。しかし、私は非常に優れたプログラマーではないため、これを機能させる方法を理解できません。新しい状態を追加すると、視覚化が機能しません。

状態を制御するコード (Coffee) を次に示します。

foreignObjectSVG要素で実装されたHTMLノードラベルを使用して、d3強制指向レイアウトを使用しています。enter()これらの要素をさまざまな時点で選択して、それらの位置やその他のプロパティを更新したい (そして、 andで作成および破棄されるときにそれらを追跡したいexit()) が、他の SVG 要素のようにそれらを選択できないようです。

コンパクトな例を次に示します。

HTML:

Javascript:

これはhttp://bl.ocks.org/3217448にもアップされています。コンソール出力は次のとおりです。

最初の配列にはcircle要素が含まれ、2 番目の配列は空です。circleオブジェクトは選択できるのに、選択できないのはなぜforeignObjectですか? の異常な性質に関係していると思いますforeignObject。コードでそれを操作するには、どのように選択すればよいですか? どうもありがとう。

私は d3.js を使用して、強制指向レイアウトのエキサイティングな世界に足を踏み入れています。d3 の基礎は理解できましたが、強制的にレイアウトを設定するための基本的なシステムがわかりません。

現在、いくつかの接続されていない泡が中心に浮かぶ単純なレイアウトを作成しようとしています。かなり単純ですよね!? 正しい円が作成されますが、何も起こりません。

編集: force.nodes() が初期データ配列を返すことが問題のようです。作業中のスクリプトでは、force.nodes() はオブジェクトの配列を返します。

これが私のコードです：

以下のように<script type="text/javascript">使用する静的グラフの実際のコード例 (一部のみ) があります。d3.js

そして、このややごちゃごちゃしたレイアウトが生成されます。

技術的には正しいグラフですが、理想的なレイアウトは次のようになります (さまざまなビジュアル グラフィックは無視します)。

ページをリロードしても各ノードの位置が変わらないように、レイアウトを修正する必要があることに注意してください。アニメーション効果がなく、ノードをドラッグできないという点で、レイアウトも静的にする必要があります。両方の要件は、上記のスクリプトで既に達成されています。

d3では、2 番目の画像に示すレイアウトを生成するには、このスクリプトをさらにどのように構成すればよいでしょうか?

私はd3.jsを使用して力指向グラフに取り組んでいます。モバイルデバイスのノードでタップおよびダブルタップイベントを処理する必要があります。マウスオーバーとクリックの機能は、d3.jsでタップとダブルタップとして複製する必要があります。タッチイベントを機能させることができましたが、モバイルデバイスでダブルタップイベントをキャプチャする方法がわかりません。

この以前の質問のおかげで、強制レイアウトを使用して、以下のように静的固定レイアウト グラフを作成しましたd3.js。

レイアウトをさらにカスタマイズするために、具体的な質問が 2 つあります。

最初に、ノードの位置を決定論的に初期化すると (たとえば、ここで対角線で実行されます。詳細についてはスクリプトを参照してください)、ノードの位置が修正され、ノードの向きがこの初期化とフォース グラフの次元に依存するように見えることに気付きました* . A, D, E, F, I上のグラフのノードを水平に並べるにはどうすればよいですか? つまり、グラフの向きを反時計回りに約 45 度回転させたいと考えています。ノードを中央で水平に初期化しようとしました:

ただし、生成された出力には、初期化された場所ですべてのノードとエッジが水平に含まれています。

次に、力のグラフがsvg要素内で自動的に中央に配置されるというのは本当ですか? いいえの場合、どうすればそうすることができますか? svgはいの場合、要素内の力グラフの中心をどのように指定できますか?

(* 注: 奇妙なことに、フォース グラフの.size([w, h])場所w = hを設定し、対角線に沿ってノードを決定論的に初期化すると、すべてのノードとエッジが出力の対角線に沿って配置されます。なぜですか?)

w力のレイアウトを使用したグラフがありますが、幅と高さが固定されていますh：

これにより、画面またはブラウザのウィンドウサイズが変更されても、縮小または縮小されないsvgグラフが作成されます。応答性を高めるために（つまり、自動的にサイズを変更するために）、属性を使用viewBoxしてみました。preserveAspectRatio

残念ながら、ブラウザのウィンドウサイズを調整しても何も起こらないため、これは機能しませんでした。.size([w, h])フォースグラフのはこれと関係があるのだろうか。

viewBox力のレイアウトグラフの使用方法とpreserveAspectRatio属性に光を当ててください。

任意のノードが他のノードにリンクできる (つまり、定義された階層がない) 有向グラフを描画したいのですが、フォース レイアウト エンジンを使用していましたが、クリック イベント処理をサポートしていません。ノードをクリックして、そのノードを中央に配置し、他のすべてをその周りに配置できるようにしたいと考えています。

D3でそれは可能ですか？

編集: d3.force.layout の API ドキュメントによると:

force.on(型、リスナー)

指定されたリスナーを登録して、強制レイアウトから指定されたタイプのイベントを受け取ります。現在、「tick」イベントのみがサポートされています

これは、クリック イベント ハンドラーを追加するだけでは機能しないことを示唆しています。

また、ツリー レイアウトには (私の知る限り) 階層が必要であり、私のデータはより複雑です。

だから私はすでにここに示されているような力指向グラフを描くページを持っています。

そして、それはうまくいきます。ここからJSを使用していますが、ノードを少しうまく広げるためにいくつかの調整を加えています。

これらは多かれ少なかれ唯一の違いです：

リンクの強度を下げると、リンクがバネのようになり、よく使用されるFruchterman＆Reingoldの手法に似たものになります。これはかなりうまく機能しますが、かなり小さいグラフの場合のみです。グラフが大きくなると、交差点の数が増えるだけです。予想どおりですが、通常、グラフが到達するソリューションは最適とはほど遠いものです。私は最適な解決策を得る方法を探していません、それは非常に難しいことを知っています。ノードだけでなくラインも強制的に離そうとする大雑把な追加が必要です。

リンク間およびノー​​ド間に反発を追加する方法はありますか？私はD3フォースの仕組みに精通しておらず、これが可能であると言っているものを見つけることができないようです...

私は過去数日間この問題に苦労してきました。この例のようにエッジにラベルを付ける力指向グラフがあります。私が直面している問題は、グラフが更新されると（つまり、ユーザーのクリックでグラフ上のノードが追加されると）グラフが更新されますが、以前に書いた古いエッジラベルが残ります。

新しいグラフが追加される前と後：

ご覧のとおり、更新後、エッジラベルがぶら下がっています。新しいデータが着信するたびに呼び出される関数があり、この関数には、ラベルを描画する次のコードがあります。

svg変数は、次のようにトップレベルのクロージャで1回宣言されます。

私のグラフには、次のように各ラベルの位置を計算するtick（）関数があります。

このsvg宣言をupdate関数に移動して、グラフが変更されるたびにインスタンス化されるようにしました。これは実際には機能しますが、グラフ全体の複製全体を作成します。最初の元のコピーはまだ古いラベルを保持していますが、2番目のコピーは私が望むとおりに機能します。おそらく、svgを追加する代わりに、置き換える方法はありますか？また、exit（）。remove（）を呼び出してみましたが、運がありませんでした。

どうもありがとうございました。これは私がこれをどのように行うべきかについて私を殺してきました。