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

Question

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

Answer 1

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

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

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