從d3.js中的樹中選擇一個節點的子節點

Question

我正在使用以下代碼here以正常工作的樹的方式顯示數據（採用JSON格式）。我們的目標是，每當一個節點上的用戶雙擊下列事情應該發生：

• （1）改變「選擇」節點的顏色
• （2）改變其所有兒童的顏色（subtree）

第一個目標（1）正常工作。爲此，我使用下面的代碼片段：

var node = svg.selectAll("g.node") 
    .data(nodes, function(d) { return d.id || (d.id = ++i); }, function(d) { return d.isSelected || (d.isSelected = false); }); 

每個節點都有一個isSelected屬性，它是一種標誌。並且該節點的顏色被改變由於下一代碼段：當「選擇」節點被髮送到selectSubtree（d）函數發生

var nodeEnter = node.enter().append("g") 
    .attr("class", "node") 
    //.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) 
    .on("click", click) 
    .each(function(d) 
    { 
    var sel = d3.select(this); 
    //var state = false; 
    sel.on("dblclick", function(e) 
    { 
     //window.alert("state is: " + state); 
     //state = !state; 

     if (!e.isSelected) { 
     e.isSelected = true; 
     d3.select(this).select("circle").style("fill", "black"); 
     //Select all nodes 


     selectSubtree(e); 

     } else { 
     e.isSelected = false; 
     d3.select(this).select("circle").style("fill", "#fff"); 

     //deselect all nodes 


     deselectSubtree(e); 

     } 
    }); 
    }); 

問題。我不知道如何改變節點的顏色。有人能幫我嗎？

function selectSubtree(node){ 

if(node.children){ 

node.children.forEach(function(d) 
{ 
    //Select all children 
    d.isSelected = true; 

     selectSubtree(d); 
});}} 

我第一次嘗試是使用d3.select（ 「＃ID」）選擇（ 「圓」），風格（ 「補」， 「#FFF」）。，因爲每個節點都有一個ID，但它不能正常工作。

Answer 1

你可以這樣說：

STEP 1

給唯一的ID在你的情況下，所有圓我設置圓的ID作爲名字

nodeEnter.append("circle") 
    .attr("id", function(d){return d.name})//give ids to circle 
     .attr("r", 1e-6); 

STEP2

在selectsubtree函數make the circ樂DOM填寫（用黑色）通過使用我們在步驟1中設定的ID

function selectSubtree(node) 
{ 
    d3.select("#" + node.name).style("fill", "black"); 
    //your code of recursively calling function if it has children. 

STEP3

在deselectSubtree功能使圓DOM填充（白色）通過使用我們在第一步

設置id

function deselectSubtree(node) 
{ 
    d3.select("#" + node.name).style("fill", "white"); 

工作代碼here