将切换框添加到d3.js缩进树图

Question

是否可以在此d3.js缩进树形图中的行中添加一个可检查框？ http://bl.ocks.org/1093025

Answer 1

svg没有内置复选框，因此您需要使用存在的svg元素创建自己的复选框。

我创建了一个使用circle元素执行此操作的JSFiddle。为此，我采用了您链接的示例并添加了以下内容：

// Add checkbox
nodeEnter.append("svg:circle")
.attr("r", 5)
.attr("fill", "white")
.on("click", function(d) {
    if (d.selected) {
        d.selected = false;
        d3.select(this).attr("fill", "white");
    } else {
        d.selected = true;
        d3.select(this).attr("fill", "black");
    }
});

要访问所选节点列表，请添加以下功能并将其命名为

function printSelectedNodes() {
  var nodes = tree.nodes(root);

  var selected = [];
  nodes.forEach(function(n, i) {
    if (n.selected) {
      selected.push(n.name);
    }
  });
  console.log(selected);
}