Highlight specific link in D3.JS sankey diagram

Question

In the example below, I want to permanently highlight a specific link (connection between each of the nodes) on initial load:

http://bl.ocks.org/d3noob/c2637e28b79fb3bfea13

As you can see, it will highlight a link on mouse hover.

This achieved with css:

.link:hover {
  stroke-opacity: .5;
}

How can I obtain the same result for a specific link (eg for link between the first two nodes), without using mouse hover (ie when the SVG elements are first added).

Answer 1

That's what you need: First, filter the link array accordingly.

var firstLink = link.filter(d => d.source.node === 0 && d.target.node === 4);

In that case, we get the first link (at the top), which goes from node 0 (source) to node 4 (target).

Then, apply the opacity:

firstLink.attr("opacity", .5);

Here is a fiddle showing it: https://jsfiddle.net/7mm1ko4f/