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