2

私は D3 にまったく慣れていないので、助けていただければ幸いです。この強制折りたたみ可能なレイアウトを変更しようとしています

https://bitbucket.org/kolbyjAFK/d3/src/f87f85b9c6e2/examples/force/force-collapsible.html

ロードするデータは単一の json ファイルにあり ます

しかし、一度にロードしたくないデータがある場合はどうなりますか。ユーザーが特定のノードをクリックしたときにのみ、子を呼び出したい。

したがって、ノードがクリックされると、子の配列を含むjsonファイルが動的にロードされるように、基本的にjsonをモジュール化したいと考えています。

私のデータは巨大な 500k リーフ ノードであるため、これを行う必要があります。

この動的読み込みを行うにはどうすればよいですか?

4

1 に答える 1

3

おそらくあなたが始めるのを助けるためにclick、あなたのコードの関数はこれを解決するための鍵です.

現在、次のようになっています。

function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update();
}

これは、2 つの異なる配列間でノードを移動することによって、構造内のノードを非表示/表示するだけchildrenです。_childrenそうでないとき。

試してみたいことは次のとおりです。

  • nodeJSON データで、各オブジェクトにオブジェクトが含まれていることを確認してくださいfilename: _fileNameString_。（name: _nodeName_ロードしているJSONに今あるように）

  • 次に、click関数は次のようにする必要があります。

    function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else if (!d.children && !d._children) {
    var nameOfTheFile = d.filename;
    var childObject = d3.json(nameOfTheFile);
    d.children.push(childObject);
  } else {
     d.children = d._children;
     d._children = null;
  }
  update();    
}

私はこれをテストしていないので、うまくいくかどうかはわかりませんが、このアプローチは実現可能であると思います.

編集: また、これは、データ全体が複数のファイルに既に分散されていることを前提としていることにも注意してください。したがって、flare.jsonファイル、または最初の JSON データをロードするために最初に使用するものは、次の構造になります。

{
  "name": "flare",
  "filename": "children1.json",
  "children": [ ]
}

そして、次のchildren1.jsonようなものになる可能性があります。

[
  {
    "name": "cluster",
    "filename": "children2.json",
    "children": [ ]
  },
  {
    "name": "graph",
    "filename": "children3.json",
    "children": [ ]
  },
  {
    "name": "optimization",
    "filename": "children4.json",
    "children": [ ]
  }
]

などなど...結論として、必要な/必要な構造を持つこれらのファイルにデータを何らかの方法で分散させる必要があります。

于 2013-08-01T07:58:33.830 に答える