13

D3.js を使用したことがある方の多くは、すでに同じことを経験していると思います。ネットワークや移動可能な要素がハードにプッシュされると、svg 要素から飛び出し続けます。私のネットワークが大きすぎると、外側のノードが消えてしまい、「世界の端に落ちる」ようなものになります。

SVGの境界線をしっかりした「壁」にする方法があると確信しているので、要素がそれを離れて宇宙を飛んで見えないようにすることはできません:)

この問題で何をしましたか？どのように解決しましたか？

前もって感謝します、デビッド

4

3 に答える 3

15

最後に、ウェブ上で適切なサイトを見つければ、それは非常に簡単です。 http://bl.ocks.org/1129492はまさに私が望んでいたことを行います - オブジェクトは svg から抜け出すことはできません。そのため、ノードの位置を更新するときにいくつかの制約を追加しました。私の「ティック」機能は次のようになりました

node.attr("cx", function(d) { return d.x = Math.max(15, Math.min(width - 15, d.x)); })
    .attr("cy", function(d) { return d.y = Math.max(15, Math.min(height - 15, d.y)); });

link.attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

これは、何か重要なことが発生する可能性があるときに呼び出されます。「ティック」とは、D3.js の奥深くに構築されたものなので、私に聞かないでください。:)

指定されたコードの最初の 2 行と最後の行は、座標が箱から出ていないことを確認します。

これが誰かが私よりも速く仕事をするのに役立つことを願っています;）

楽しい時間を過ごしてください、デイブ

于 2013-01-23T14:02:06.027 に答える
2

力指向グラフで境界をソリッドな「壁」にするには、バウンディング ボックスのエッジにカスタムの衝突検出を実装する必要があります。カスタム衝突検出の例を次に示します。

クリストファーのアプローチは、小さめのグラフではうまく機能しますが、ビューポートよりもはるかに大きいグラフでは、判読できないほど小さいサイズにスケーリングされます。上記のアプローチは、小さなビューポートの大きなグラフでも失敗します。これは、ある時点で衝突を解決できなくなるためです。

非常に大きなグラフの場合は、代わりに、ユーザーがパンとズームアウトできるようにすることをお勧めします。 This SO post は、ズームに関するいくつかのヒントを提供します。rectまた、マウス イベントを受け取るターゲットとして、グラフのサイズのを作成する必要があります。tickこれは、イベント ハンドラーで、たとえば強制有向グラフのサイズに動的にサイズ変更できます。

それらがいくつかの有用な指針であることを願っています。

于 2012-11-22T14:33:46.863 に答える
0

グラフの可視化を修正する一般的な方法は、バウンディング ボックスを取得してから、バウンディング ボックスをビューポートに正確にマッピングする変換を SVG で作成することです (アスペクト比を漠然と妥当な値に固定したままにします)。

ユーザーがズームインすると、このプロセスを忘れてしまいます。

その結果、「もの」が飛び去ると、効​​果的にズームアウトすることがわかります。そして、ユーザーは好きなようにズームできます。

これをうまく機能させるための鍵は、状態グラフを書き留めることです。何かが再計算をトリガーすると、「バウンディング ボックスの修正」モードに入り、グラフの動きがほとんど停止すると、「ユーザー コントロール ズーム」モードに切り替わります。これをうまく機能させるということは、状態間の遷移を正しく行うことを意味します (上級ユーザーには常にオーバーライドを提供します)。

于 2012-11-21T08:54:50.917 に答える