javascript - 强制可折叠布局中的分布式 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": [ ]
  }
]

等等...最重要的是，您已经必须以您想要/需要的结构在这些文件中以某种方式分发您的数据。