Distributed json loading in force collapsable layout

问题

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

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.

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

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

How could i do this dynamic loading?

回答1:

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

Right now it looks like this:

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

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.

What you might want to try is:

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

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.

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

And the children1.json could be something like:

[
    {
        "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.

来源：https://stackoverflow.com/questions/17962350/distributed-json-loading-in-force-collapsable-layout

标签

javascript

json

d3.js