Fading chords in d3js chord graph

Question

I'm a total beginner with d3js, so please be patient if my question looks dumb.

I'm trying to reproduce a chord graph like the one proposed by Mike Bostock. In the code by Bostock if you go with your mouse on an arc, all the chords that are not involved (as target as well as source) in the arc will fade.

I'd like to change it in order to let all the chords fade except the one on which there is a mouse (in order to emphasize one single two-way relationship).

I've added a fade_single function that is triggered when the mouse is over a chord:

svg.append("g")
    .attr("class", "chord")
    .selectAll("path")
    .data(chord.chords)
    .enter().append("path")
    .style("fill", function(d) { return fill(d.target.index); })
    .attr("d", d3.svg.chord().radius(r0))
    .style("opacity", 1)
    .on("mouseover", fade_single(0.1))
    .on("mouseout", fade_single(1));

The fade_single function follows:

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

The problem is that I don't know what to put in the commented line, i.e. to filter out all the relationship that are have not the row and column of the single chord. I've tried to play with the subindexes but the parameter i only gives you the row, so I don't know how to isolate the chord I want to exclude from the fading.

Any idea? Any hint?

Thank you,

Elisa

Answer 1

To fade everything but the current elemeent, the easiest way is to use the this reference to the current DOM element:

function fade_single(opacity) {
  return function() {
    var me = this;
    svg.selectAll("g.chord path")
        .filter(function(d) {
          return this != me;
        })
      .transition()
        .style("opacity", opacity);
  };
}