javascript - d3js 和弦图中的淡入和弦

Question

我是 d3js 的初学者，所以如果我的问题看起来很愚蠢，请耐心等待。

我正在尝试重现像one这样的和弦图。由迈克·博斯托克提出。在 Bostock 的代码中，如果您将鼠标放在弧上，则弧中不涉及的所有和弦(如目标以及源)都会消失。

我想更改它，以便让所有和弦淡出，除了有鼠标的和弦(为了强调单一的双向关系)。

我添加了一个 fade_single 函数，当鼠标悬停在和弦上时会触发该函数:

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));

fade_single 函数如下:

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);
  };
}

问题是我不知道要在注释行中放入什么，即过滤掉所有不包含单个和弦的行和列的关系。我尝试使用子索引，但参数i只提供行，所以我不知道如何隔离我想从褪色。

有什么想法吗？有什么提示吗？

谢谢，

enzyme 联免疫吸附试验

Answer 1

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

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