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

Distributed json loading in force collapsable layout

本文关键字：分布式 json 加载 可折叠 布局      更新时间：2023-09-26

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

我该如何进行这种动态加载？

为了帮助您入门，代码中的 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": [ ]
  }
]

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

相关文章：