StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHighlight selected node, its links, and its children in a D3 force directed graph
text
Body
copied!<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="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("circle, line").style("opacity", opacity); var associated_links = svg.selectAll("line").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("opacity", 1); //THE FOLLOWING CAUSES: Uncaught TypeError: Cannot call method 'setProperty' of undefined d3.select(dLink.source).style("opacity", 1); d3.select(dLink.target).style("opacity", 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="http://mbostock.github.com/d3/ex/chord.html" rel="noreferrer">http://mbostock.github.com/d3/ex/chord.html</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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload