When using a collapsible tree diagram like the one found at https://bl.ocks.org/mbostock/4339083, my goal is to make a server call to retrieve additional children and add them to the existing JSON data upon loading.
While I have successfully achieved this on click events, determining the correct index of the clicked node in order to update the JSON accordingly has proven to be a challenge.
The depth of the children within the JSON structure is associated with the function(d) { return d.depth }, but accurately identifying which child was clicked at that specific depth seems to be problematic.
Initially, it may seem straightforward by using the index provided by the function(i) in d3, however, this index changes as nodes are opened or closed (try opening and closing nodes in the example link).
Is there a find method or another feature in d3 that can help me leverage the correct index?
depth: 2 = children.children
What is the best way to access the x's mentioned above?
root.children[x].children[x].children = childArray;
Although the example only shows one layer of children, this functionality needs to work recursively so that every node can be clicked to reveal more data.
See the full example here (Line 264): http://codepen.io/pjbrof/pen/kXzGpd
root.children[0].children[0].children = childArray;
update(root);