title: Highlight selected node, its links, and its children in a D3 force directed graph
body: <p>I am working on a force directed graph in D3. I want to highlight the mouseover'd node, its links, and its child nodes by setting all of the other nodes and links to a lower opacity.</p>
  <p>In this example, <a href="http://jsfiddle.net/xReHA/" rel="nofollow noreferrer">http://jsfiddle.net/xReHA/</a>, I am able to fade out all of the links and nodes then fade in the connected links, but, so far, I haven't been able to elegantly fade in the connected nodes that are children of the currently mouseover'd node.</p>
  <p>This is the key function from the code:</p>
  <pre><code>function fade(opacity) {
      return function(d, i) {
          //fade all elements
          svg.selectAll(&quot;circle, line&quot;).style(&quot;opacity&quot;, opacity);
  
          var associated_links = svg.selectAll(&quot;line&quot;).filter(function(d) {
              return d.source.index == i || d.target.index == i;
          }).each(function(dLink, iLink) {
              //unfade links and nodes connected to the current node
              d3.select(this).style(&quot;opacity&quot;, 1);
              //THE FOLLOWING CAUSES: Uncaught TypeError: Cannot call method 'setProperty' of undefined
              d3.select(dLink.source).style(&quot;opacity&quot;, 1);
              d3.select(dLink.target).style(&quot;opacity&quot;, 1);
          });
      };
  }
  </code></pre>
  <p>I am getting a <code>Uncaught TypeError: Cannot call method 'setProperty' of undefined</code> error when I try to set the opacity on an element I loaded from the source.target. I suspect this is not the right way to load that node as a d3 object, but I can't find another way to load it without iterating over all of the nodes again to find the ones that match the link's target or source. To keep the performance reasonable, I don't want to iterate over all the nodes more than necessary.</p>
  <p>I took the example of fading the links from <a href="https://bl.ocks.org/mbostock/4062006" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/4062006</a>:</p>
  <p><img src="https://i.stack.imgur.com/SKHiG.gif" alt="enter image description here" /></p>
  <p>However, that doesn't show how to alter the connected child nodes.</p>
  <p>Any good suggestions on how to solve or improve this will be furiously upvoted :)</p>