添加一個切換框到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); 
}