强制可折叠布局中的分布式 json 加载

Question

我对 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 叶节点。

我怎样才能进行这种动态加载？

Answer 1

为了帮助您入门，您代码中的 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_ 对象。 （就像您现在正在加载的 JSON 中有 name: _nodeName_）

• 那么，您的 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": [ ]
  }
]

等等...底线，您必须以某种方式在这些文件中以您想要/需要的结构将您的数据分布。