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当他们不是时。{/ p>

您可能想要尝试的是：

确保在您的JSON数据中，每个node对象中都有一个filename: _fileNameString_对象。（就像你现在正在加载的JSON中name: _nodeName_一样）
然后，您的click函数必须执行以下操作：

功能点击（d）{ if（d.children）{ d._children = d.children; d.children = null; } else if（！d.children＆amp;＆amp;！d._children）{ var nameOfTheFile = d.filename; var childObject = d3.json（nameOfTheFile）; d.children.push（childObject）; } else { d.children = d._children; d._children = null; } 更新（）;
}

请注意我没有测试过，所以我不确定它是否有效，但我认为这种方法可行。

修改另请注意，这假设您的整个数据已经分布在多个文件中。因此，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": [] } ]

依此类推......最重要的是，你必须在这些文件中以某种方式将你的数据分发与你想要/需要的结构。

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

1 个答案: