分布式json加载强制可折叠布局 [英] Distributed json loading in force collapsable layout

问题描述

我对D3很新，会很感激一些帮助。我正在尝试修改此力可折叠布局

I am quite new to D3 and will really appreciate some help. I am trying to modify this force collapsible layout

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

The data it loads is in single json file https://bitbucket.org/kolbyjAFK/d3/src/f87f85b9c6e236f20dec8151ae11438950aaf967/examples/data/flare.json?at=fix-interpolate-hsl

但是如果我有一个我不想加载的数据。我只想在用户点击特定节点时调用这些子元素。

But what if i have a data which i dont want to load in a go. I want to call the children only when the user clicks on a particular node.

所以我基本上想要对json进行模块化，这样当点击节点时，json文件包含子数组动态加载。

So i basically want to modularize json so that when a node is clicked, json file containing the array of children loads dynamically.

我需要这样做，因为我的数据是巨大的，500k叶节点。

I need to do this as my data is huge, 500k leaf node.

动态加载？

推荐答案

为了帮助你开始，

To maybe help you get started, the click function in your code is the key to solve this.

现在它看起来像这样：

function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update();
}

这只会隐藏/显示结构中的节点，数组： children 当它们可见时; _children 。

This only hides/shows the nodes in your structure by moving them between two different arrays: children when they visible; _children when they are not.

您可能想尝试的是：

• 确保在您的JSON数据中，每个节点对象有一个 filename：_fileNameString_ 中的对象。 （例如您现在在载入的JSON中有 name：_nodeName _ ）



• c>单击函数将需要执行以下操作：

• make sure that in your JSON data, each node object has a filename: _fileNameString_ object in it. (like you have name: _nodeName_ right now in the JSON you are loading)

• then, your click function would have to do something like:

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（）;

}

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();
}

我没有测试这个，所以我不知道它是否工作，但我认为这种方法是可行的。

Please note that I haven't tested this, so I'm not sure if it works or not, but I think that this approach might be feasible.

编辑：
另外请注意，假设您的整个数据已分布在多个文件中。因此， flare.json 文件，或者任何您首先加载第一个JSON数据的文件都具有以下结构：

Also note this assumes that your whole data is already distributed throughout several files. So, the flare.json file, or whatever you use first to load you first JSON data has this structure:

{
 "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": []
    }
]

等等...底线，你已经有你的数据以某种方式在这些文件中，你想要/需要的结构。

And so on... Bottom line, you already have to have your data distributed somehow in these files with the structure you want/need.

这篇关于分布式json加载强制可折叠布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！