Checking group of boxes in an indented tree - d3.js

Question

Staring from previously posted code I'd like check branch boxes when one clicks on the upper box. For instance, on the picture below, I would like that checking the BRE box, check the five checkboxes of the tree branch, and conversely, unchecking BRE would uncheck the five children.
To do so, I made a few changes in the code:
// On click, check the corresponding box, select it as well as its children (recursively)
function check(d) {
d.Selected = !d.Selected;
d3.select(this).style("opacity", boxStyle(d));
if (d.children) {
// mark children recursively
for(n in d.children) {
checkBox(d.children[n], d.Selected);
}
}
console.log(d);
update(d);
}
function checkBox(d, checked) {
d.Selected = checked;
}
As one can check in the console, items are properly Selected, the clicked box is properly checked, but children are not although I forced updating the drawing with the update function used to update after collapsing/expending.
Collapsing, hence expending the tree shows that everything is in place to properly draw the tree, it seems that it's not updated (redrawn from source) after the BRE box have been checked.
Is there something in the main code that prevent redrawing when branches have not been collapsed or expended?

Answer 1

You only apply the style:
.attr("style", function(d) { return "opacity: "+boxStyle(d) });
on the nodeEnter selection in your update. You need to apply on the node selection to update:
node.selectAll("path:nth-child(3)")
.attr("style", function(d) { return "opacity: "+boxStyle(d) });
The selector here is a little funny. Since you have multiple paths at in each node I had to find it by it's child position.
Here's an example.
Note, two things:
1.) This is not truly recursive and it only "checks" one child level down.
2.) It'll only check the children if the node is expanded.
Here's a new version which solves those issues:
// Toggle check box on click.
function check(d) {
d.Selected = !d.Selected;
if (d.children || d._children) {
// mark children recursively
for(var n in d.children) {
check(d.children[n]);
}
for(n in d._children) {
check(d._children[n]);
}
}
}
function recurCheck(d){
check(d);
update(d);
}