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

Question

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

Answer 1

There is no built in checkbox for svg, so you will need to create your own using svg elements that do exist.

I created a JSFiddle that uses the circle element to do this. To do this, I took the example you linked and added the following:

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

To access the list of selected nodes, add the following function and call it

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

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