score:1

Accepted answer

You have to do it like this:

On click of the node fetch the children associated with the node:

function getMyData(d) {
  //return the url for the 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 your ajax call to get the chldren

    var url = getMyData(d);
    d3.json(url, function(error, json) {
      d.children = json;
      update();//update on ajax success.
    })

  }

}

Here these are my ajax calls to load its children based on the parent node "https://gist.githubusercontent.com/cyrilcherian/b9bcb0fdc398bd691641/raw/11a79edf99511cf040ffcb98ae9c30895798ae5e/flare.json"

Working code here

You need to click the flare/cluster/graph/analytics node to load its children via ajax.

Hope this helps!


Related Query

More Query from same tag