What does the syntax d._children = d.children; stand for in d3.js?

Question

In various examples on tree visualizations such as this collapsible tree example the syntax d._children = d.children; is used. For example in this code block from the example above:

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

What does the syntax d._children exactly mean? To me it was not clear where this is defined and if it's d3.js specific or JavaScript syntax in general.

Any tips on tree traversal tutorials which involve such schemes are more then welcome!

Answer 1

_children is just a temp variable that holds the children when they are hidden. When you click you are either taking children to null and storing the children in the temp variable, or, if children is already null, loading them from the temp variable.

Any temp variable could have been used. There is nothing special about _children. It is used to show an obvious relationship to children.

Answer 2

I was just testing this via this example below and found that if I replaced the word children with anything else the tree failed to load correctly. I believe children is a required keyword. https://bl.ocks.org/mbostock/4339083

I just verified this. In order to use another keyword to define children you must use the tree.children() function like this:

tree.children(function(d){ return d.dependencies; });