2

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

4

1 回答 1

4

要淡化除当前元素之外的所有内容，最简单的方法是使用this对当前 DOM 元素的引用：

function fade_single(opacity) {
  return function() {
    var me = this;
    svg.selectAll("g.chord path")
        .filter(function(d) {
          return this != me;
        })
      .transition()
        .style("opacity", opacity);
  };
}
于 2013-09-29T18:43:05.183 回答