2

我对 D3 很陌生，非常感谢一些帮助。我正在尝试修改此强制可折叠布局

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

它加载的数据在单个 json 文件中 https://bitbucket.org/kolbyjAFK/d3/src/f87f85b9c6e236f20dec8151ae11438950aaf967/examples/data/flare.json?at=fix-interpolate-hsl

但是，如果我有一个不想立即加载的数据怎么办。我只想在用户单击特定节点时才调用孩子。

所以我基本上想模块化 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();
}

这仅通过在两个不同的数组之间移动它们来隐藏/显示结构中的节点：children当它们可见时；_children当他们不是。

您可能想尝试的是：

  • 确保在您的 JSON 数据中，每个node对象都有一个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 回答