检查缩进树中的一组框

Question

从 previously posted code 开始我想在点击上方的框时选中分支框。例如，在下图中，我希望选中 BRE 框，选中树枝的五个复选框，反之，取消选中 BRE 将取消选中五个 children.

为此，我对代码进行了一些更改：

// 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;
}

因为可以在控制台中检查，项目是正确的 Selected，点击的框被正确检查，但是 children 不是虽然我用更新功能强制更新绘图用于更新在 collapsing/expending.

之后

Collapsing, therefore expending the tree 表明一切都已就绪，可以正确绘制树，似乎在选中 BRE 框后它没有更新（从源重新绘制）。

主代码中是否有某些东西可以防止在分支尚未折叠或展开时重绘？

Answer 1

您只应用了样式：

 .attr("style", function(d) { return "opacity: "+boxStyle(d) });

关于更新中的 nodeEnter 选择。您需要在 node 选项上申请更新：

 node.selectAll("path:nth-child(3)")
   .attr("style", function(d) { return "opacity: "+boxStyle(d) });

这里的选择器有点搞笑。由于每个节点中有多个 paths ，我必须通过它的子位置找到它。

这是一个 example。

注,两件事:

1.) 这不是真正的递归，它只有 "checks" 一个子级向下。

2.) 如果节点展开，它只会检查子节点。

这里 new version which 解决了这些问题：

// 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);
}

检查缩进树中的一组框

Checking group of boxes in an indented tree

d3.js