問題タブ [d3-force-directed]

私は現在d3.jsを使い始めました。ノードをグループ化して、強制有向グラフで異なる色を与える方法は? 例: 親ノードの色は赤、子ノードの色は青です。

力指向レイアウトの一部のノードで、すべての力を無視し、ノードの属性に基づいて固定位置にとどまりながら、ドラッグして他のノードに反発を加え、それらのリンクラインを維持できるようにします。

私はそれがこれと同じくらい簡単だろうと思いました：

また、各ティックでノードのx属性とy属性を手動で設定しようとしましたが、力の影響を受けた場合にノードが存在する場所にリンクが浮き上がり続けます。

明らかに、私はこれがどのように機能するかについて基本的な誤解を持っています。リンクを維持しながら、ノードをドラッグ可能にしながら、ノードを特定の位置に固定するにはどうすればよいですか？

動的に作成されたデータセットのノードにツリーのような構造を作成することを計画しており、力有向グラフのすべてのノードの y 軸座標を設定したいと考えています。言い換えれば、ノードを (ツリー構造のように) レベルに配置し、ノードは x 軸で自由に移動して最適化できるようにしたいと考えています。

最終結果は、ノードがデフォルトのように放射状に配置されるのではなく、割り当てられたレベルに配置されるツリーになります。兄弟リンクはオーバーラップしてはならず、できるだけ短くする必要があります (論理的なグループ化のため、フォース グラフを介してこれを行う必要があります)。
誰かがこれよりも簡単な解決策を持っている場合、私は完全に耳を傾けます.

コードの抜粋:

D3 強制指向グラフの視覚化に、パンのみを追加しようとしています (今のところズームは必要ありません)。何を試しても、「null のプロパティ 'translate' を読み取れません」というエラーが表示され続けます。見つけたすべての例のように設定しているように感じますが、何かが正しくありません。

これが私の最近の試みです。私の知る限り、関連するコードは svg を定義する場所の一番上にあるはずですが、私が気付いていない何かがそれに影響を与えている場合に備えて残りを含めました。

force() レイアウトを使用する基本的な接続グラフ (たとえば、2 つ以上のノードとそれらを接続するリンク) を作成するにはどうすればよいですか? ノードをドラッグして、ノードがドラッグされているときに接続を維持するようにリンクを調整できるようにしたいだけです。force() のチャージまたはポジショニング機能とダブルクリック処理も必要です。基本的に、すべてのノードを「スティッキー」にする必要があります。ノードは、ドラッグされている場合にのみ移動します。

しかし、これを行う簡単な方法はありますか？ノードとリンクを示すこのサンプルのように -

http://djalmaweb.hyperphp.com/wordpress/time-graph-lines/image/

どこかに基本的な例はありますか？

ありがとう

力有向グラフにラベル付きエッジを実装しようとしています。

私が使用する例はここにあります。

この例の関連するコードは、ここに示されています。

私のコードは次のとおりです。

データは以下のとおりです。

残念ながら、グラフのラベルは表示されません。

最終的な目的は、各エッジに対応する値「値」を表示することです。

私が間違っていることを教えてください。

お時間をいただきありがとうございます。

アップデート

サブビングによってラベルがエッジに正常に追加されました

為に

しかし、疑問が残ります: ラベル「ラベル i」の代わりに「値」データムを追加するにはどうすればよいでしょうか? さらに、マウスオーバー時の外観はどのように実装できますか?

アップデートⅡ

「値」データは、edgelabels の textPath に .data(graph.links) を定義し、d.value を返すことによって表示されるように作成されました。マウスオーバーを実装する方法を教えてください。各エッジの「値」データがホバー時にのみ表示されると便利です。ありがとうございました！

d3 で強制指向レイアウトを使用して、適切なグラフ レイアウトを維持しながらリンク距離を優先するにはどうすればよいですか?

ダイナミック リンクの距離を指定し、デフォルトの電荷を維持すると、グラフの距離が電荷関数によって少し変化し、正確な距離ではなくなります。

ただし、料金を削除すると、グラフは次のようになります。

アドバイスをいただければ幸いです。

まず第一に: d3-バージョン:"version": "3.5.17"

2 つの異なる種類のテーマ マップ、比例シンボル マップ、およびシンボル (円、比例シンボルと同じ) を含む疑似デマーズ カートグラムがあり、衝突検出と重力を使用して、可能な限り原点に近づけます。

ただし、比例シンボル マップからカートグラムへの円をアニメーション化したいと考えています。特に、衝突検出と重力のために力指向グラフをトリガーしたいだけです。これは初めてうまくいきます。カートグラムからプロポーショナル シンボル マップに戻るアニメーションを提供します。各シンボルはその重心に戻るだけです。ここで、カートグラムに戻りたい場合、コードは失敗しUncaught TypeError: Cannot read property '1' of undefined、最初と同じ時間にもう一度トリガーしても、と表示されます。これは、フォースの再利用性におけるある種のバグですか? または私の側の何らかのエラーですか？

問題はここでテストできます: https://particles-masterthesis.github.io/aggregation/ ; 左上で、比例記号とカートグラムを切り替えることができます。

私が使用している適切なコードは次のとおりです。 case 'psm_cartogram': let psm = this.currentViz; information = { data: psm.nodes, symbols: psm.symbols }; upcomingViz.obj = this.canvas.drawCartogram( null, this.currentViz.constructor.name === "Cartogram", information, () => { this.currentViz.hide(false, true); this.fadeOutParticles(); } ); upcomingViz.type = 'cartogram'; resolve(upcomingViz); break;

重要な部分はinformationオブジェクトにあります。ここでは、カートグラムと比例シンボル マップの間で同じオブジェクトを共有しています。

カートグラムには、次の重要なコードがあります。

``` this.force = this.baseMap._d3.layout.force() .charge(0) .gravity(0) .size([this.width - this.symbolPadding, this.height - this.symbolPadding]);

...

```

なんらかの形で役立つ場合は、コードもhttps://github.com/particles-masterthesis/aggregation/src/js/visualization/mapで入手できます。メイン コードは、トランジション マネージャーと 2 種類のマップです。

私がチェックアウトできる簡単なヒントであっても、私が得ることができる提案とサポートに感謝します.

PS:

これらは 2 つのスクリーンショットです。最初のものは、重力などを行う前に-関数にあったさまざまなログにとって重要であり、2番目のものはエラーについて言及していcartogram:132ます。console.log(this.node)tick

this.node最初のログの理解を深めるために: tick 関数でログを記録することから始めます。その後、psm へのビジュアライゼーションの変更がトリガーされ ( cartogram_psm)、後でカートグラムに戻ると、エラーが表示されました。