1

バックグラウンド：

THREE.js 内の有向グラフを探索するテスト プロジェクトに取り組んでいます。DOM ではないデータ構造を持っていますが、多くのプロパティを共有しています。つまり、構造は階層的であり、（サブグラフ）選択を実行できます。レイアウトエンジンを構築しました。今、私はそれを動的にしたいと考えています。これは、この場合はシーン オブジェクトによって表されるノードを追加/削除/更新できるようにしたいということです。

これが D3.js で処理される方法が気に入っていますが、ライブラリは DOM に存在するデータに大きく依存しているようです (?)

ソースコードを調べて、少し頭が痛くなりました。

質問：

私の（非DOM）シナリオを処理するおもちゃの実装を作成したいので、Mike Bostockの入力、終了、更新パターンがどのようにコーディングされているか知っている人はいますか。

よろしくお願いします。

4

2 に答える 2

0

いくつかの基本を理解していれば、D3 は簡単です。ここにあなたに役立ついくつかの基本があります。

  • 選択は D3 のコア コンセプトです
  • ページの本文を選択します
  • コンテナ要素を追加する
  • データセットの要素ごとに、ビジュアル要素を追加します

それは何をしますか？

  • 読み込み、バインド、変換、遷移
  • d3 – D3 オブジェクトを参照します
  • select() – 一致する DOM 内の最初の要素への参照を返します
  • selectAll() – 複数の要素
  • append() – 新しい DOM を作成し、それが作用している選択範囲の最後に追加します
于 2014-07-26T11:34:47.660 に答える
0

D3 の作者である Mike Bostock は、D3 の設計に関する論文を発表しました。Vadim Ogievetsky と Jeffrey Heer が共著し、IEEE Trans で公開されました。ビジュアライゼーション & コンプ。Graphics (Proc. InfoVis), 2011. 無料でダウンロードできる PDF へのリンクは、ここにあります。

更新パターンと実装を正しく理解したら、それほど難しくありませんでした。

興味のある方へ: 動的遷移の鍵は、どのデータが到着し、出発し、留まるか (D3 で入力、終了、更新) を識別できることです。到着データと滞在データをレイアウトし、任意のノードまたはその視覚的表現で変換を実行できます。あなたの表現から残す要素を取り除くなど。

私の例では、新しいルート ノードの祖先と以前のルート ノードの祖先との間のグラフの補完と交点を計算する必要がありました。

于 2014-07-22T19:19:12.337 に答える