Select the children of a node from a tree in d3.js
<p>I am using the following code <a href="https://jsfiddle.net/u1xm61yg/9/" rel="nofollow">here</a> to display data (in JSON format) by the means of a tree, which work correctly. The goal is that whenever the user double clicks on a node that the following things should happen:</p>

<ul>
<li>(1) change the color of the 'selected' node</li>
<li>(2) change the color of all its children (subtree)</li>
</ul>

<p>The first goal (1) works correctly. To do so I used the code snippets below:</p>

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

<p>Every node has a isSelected attribute, which is a sort of a flag. And the color of the node is changed thanks to the next code snippet:</p>

<pre><code>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);

      }
    });
  });
</code></pre>

<p>The problem occurs when the 'selected' node is sent to the <strong>selectSubtree(d)</strong> function. I don't know how to exactly change the color of the node. Can someone help me?</p>

<pre><code>function selectSubtree(node){

if(node.children){

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

        selectSubtree(d);
});}}
</code></pre>

<p>My first attempt was to use <strong>d3.select("#id").select("circle").style("fill", "#fff");</strong> , since every node has an id, but it wasn't working correctly.</p>