从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