How to recursively toggle nodes in a d3.js tree diagram

Question

I have a tree diagram where each node has an element that describes the colour of the node (green or red). These colours are hierarchical in the sense that if a node is red then its parent will be red. The idea being that the colour travels up the tree (I hope that makes sense.

The following diagram shows an example tree where (for example) Bilbo being red means that Durin is red which in turn means that Level 2-B is red etc.

The code that I have in the JSFiddle here is supposed to load the tree data and to show those branches where the nodes are red. Where it strikes a node which is green and which has children that are green, I expected them to not be expanded.

For example, here is a picture of what I want to happen when the tree loads;

But here is what actually happens;

(notice that Merry and Pipen have expanded out when I didn't want them to, but Gandalf and Saruman are correctly collapsed)

The code that I've been using to recursively expand the appropriate nodes is as follows;

root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;

function toggleAll(d) {
  if (d.children) {
    if (d.status == "green") {
      d._children = d.children;
      d._children.forEach(toggleAll);
      d.children = null;
    }
  }
}

root.children.forEach(toggleAll);

I have a sense that the point where I'm getting it wrong is in

      d._children.forEach(toggleAll);

(since it has no effect that I can discern) But I can't figure out why it won't work.

Many thanks for reading this far :-).

Answer 1

You still need to traverse the tree if the status is not green:

function toggleAll(d) {
    if (d.children) {
        if (d.status == "green") {
            d._children = d.children;
            d._children.forEach(toggleAll);
            d.children = null;
        }
        else
            d.children.forEach(toggleAll);
    }
}

Updated FIDDLE .

Answer 2

Can you explain to me how you put that on html? I need to do the same chart in my website but idk how to put this on html