Accessing Lines Chord Diagram D3

Question

I'm working on fading out certain lines from a chord diagram when a separate chart is hovered over. I'm looking at the code for the "fade" function,

`function fade(opacity) {
  return function(g, i) {
    svg.selectAll(".chord path")
    .filter(function(d) { return d.source.index != i && d.target.index != i; })
    .transition()
    .style("opacity", opacity);
  };
 }`

And I was just wondering if someone could explain to me what d.source.index means and d.target.index mean. I generally understand that it's the source of the chord and the target of the chord, but I wanted to gain some more specific insight into the values/meaning of "index" so that I could better manipulate the selection.

My ultimate goal is to over over a box in a separate legend rectangle, and have the chord diagram fade so that only the color hovered over in the legend box retains full opacity.

Answer 1

Every chord has data associated with it. This data has, among other things, source and target attributes, which point to the nodes that the chord connects. In the code above, the index attribute of the source and target nodes is referenced to identify which ones to filter. This can be anything you want though.

In your application, depending on what the legend is for, you would need to check the value displayed in the legend for the source/target nodes or the chord itself.