javascript - How to expand child from JSON, load data after click parent - D3.Js - force directed layout -

i want use example http://bl.ocks.org/mbostock/1093130

link collapsible force layout , load nodes json in first loading.

question:

i want load child after click parent's node , expand after click.

when collapse each node, destroy nodes child.

how implement idea?

note: graph huge , web browser doesn't respond load. want load/destroy data gradually.

you have this:

on click of node fetch children associated node:

function getmydata(d) {   //return url parent node.   if (d.name == 'graph') {     return "https://gist.githubusercontent.com/cyrilcherian/231657f6c86d540adf64/raw/375f89aaa65d16bbbda904c7f17a132face1a7d6/graph_children.json";   } else if (d.name == 'cluster') {     return "https://gist.githubusercontent.com/cyrilcherian/dbf9f0b2180201e4cdbe/raw/a7e6361349fe06b6c16f7f376d07dae36da89848/cluster_children.json";   }  else if (d.name == 'analytics') {     return "https://gist.githubusercontent.com/cyrilcherian/0efc76bd75386bf89961/raw/5d32ea77f1d34e8ca40f749ce9d501669e8563a4/analytic_children.json";   } else if (d.name == 'flare') {     return "https://gist.githubusercontent.com/cyrilcherian/b9bcb0fdc398bd691641/raw/11a79edf99511cf040ffcb98ae9c30895798ae5e/flare.json";   } else     return []; }  // toggle children on click. function click(d) {    if (d3.event.defaultprevented) return; // ignore drag   if (d.children) {     d.children = null;     update();   } else {     //do ajax call chldren      var url = getmydata(d);     d3.json(url, function(error, json) {       d.children = json;       update();//update on ajax success.     })    }  } 

here these ajax calls load children based on parent node "https://gist.githubusercontent.com/cyrilcherian/b9bcb0fdc398bd691641/raw/11a79edf99511cf040ffcb98ae9c30895798ae5e/flare.json"

working code here

you need click flare/cluster/graph/analytics node load children via ajax.

hope helps!