3

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

船体グラフの例

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

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

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

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

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

hulls = {1:{nodeIDs:[1,2,3,4,5], name:"hull1"}, 2:{...}, ...};

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

4

1 に答える 1

1

最も効率的な方法は、ドラッグされているノードを周回する座標の 8 タプルの位置のみを再計算し、その情報を再描画のために親ハルに伝達することです。

これを行うには、いくつかの変更を加えます。

  • 各ノードのデータ構造に、次の要素を追加します。
    • すべての親ハルへの参照（あなたが提案したように）
    • そのノードを周回する「パディング」座標の 8 タプル (キャッシュ)
  • ドラッグ時は、ドラッグされているノードのみを考慮してください。
  • そのノードの 8 タプルを更新します。
  • そのノードの親ハルの子ノードを収集し、それらの 8 タプルを一緒に折りたたんでフィードしますhull(必要に応じて前のハルを破棄します)。

私はd3.jsの API に詳しくありませんが、私が残した空白を埋めていただけると確信しています。

于 2012-08-25T19:55:58.123 に答える