14

を使用して力指向グラフを作成しようとしていd3.layout.forceますが、コンテナのサイズを変更できる必要があります。つまり、サイズに基づいて適切な電荷とlinkDistanceの値を計算できるようにするか、d3で計算してもらいたいのです。魔法の方法。

ノードのみを使用する試みを行いました（リンク：http：//jsfiddle.net/VHdUe/6/ ）。円の半径全体にフィットするノードの数に基づいた値に料金を設定しています。

このソリューションは一部の中型コンテナで機能しますが、[サイズ変更]を数回クリックすると、すべてのサイズで実際に機能するとは限らないことがわかります...

私が見ることができる唯一の方法は、svgスケール変換を使用することです。これは、私の要素のサイズを不利に台無しにします。他のオプションはありますか？

PS： http: //mbostock.github.com/d3/talk/20110921/bounding.html （バウンディングボックスを使用したD3の力指向レイアウトへの回答）を見たことがありますが、重力ベースのソリューションが必要です。バウンディングボックス1。

4

1 に答える 1

21

ChargeとlinkDistanceに加えて、重力もあります。グラフがレイアウトサイズに対して同じ相対密度を維持するようにしたい場合は、電荷と重力の両方をスケーリングする必要があります。これらは、ブロブの全体的なサイズを決定する主な2つの計算力です。詳細については、私の力のレイアウトの話を参照してください。

私はいくつかの異なるバージョンを試しましたが、これはかなりうまく機能しているようでした：

var k = Math.sqrt(nodes.length / (width * height));

layout
    .charge(-10 / k)
    .gravity(100 * k)

これはグラフ密度に直線的に比例しますnodes.length / (width * height)：ノードの面積をレイアウトの面積で割ったものです。電荷力は逆二乗の法則に従うので、平方根がうまく機能する理由を説明できるかもしれません。D3の「重力」は、レイアウトの中心からの距離に比例してスケーリングする仮想スプリングです。これにより、グラフの密度が高くなり、ノードが境界ボックスから逃げるのを防ぐため、重力も増加します。

于 2012-03-29T16:35:09.920 に答える