javascript - Distributed json loading in force collapsable layout -

i quite new d3 , appreciate help. trying modify force collapsible layout

https://bitbucket.org/kolbyjafk/d3/src/f87f85b9c6e2/examples/force/force-collapsible.html

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

but if have data dont want load in go. want call children when user clicks on particular node.

so want modularize json when node clicked, json file containing array of children loads dynamically.

i need data huge, 500k leaf node.

how dynamic loading?

to maybe started, click function in code key solve this.

right looks this:

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

this hides/shows nodes in structure moving them between 2 different arrays: children when visible; _children when not.

what might want try is:

• make sure in json data, each node object has filename: _filenamestring_ object in it. (like have name: _nodename_ right in json loading)

• then, click function have 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 haven't tested this, i'm not sure if works or not, think approach might feasible.

edit: note assumes whole data distributed throughout several files. so, flare.json file, or whatever use first load first json data has structure:

{  "name": "flare",  "filename": "children1.json",  "children": [] } 

and children1.json like:

[     {         "name": "cluster",         "filename": "children2.json",         "children": []     },     {         "name": "graph",         "filename": "children3.json",         "children": []     },     {         "name": "optimization",         "filename": "children4.json",         "children": []     } ] 

and on... bottom line, have have data distributed somehow in these files structure want/need.