d3js和弦圖中的和弦逐漸消失

Question

我是d3js的入門者，因此，如果我的問題很傻，請耐心等待。

我試圖重現一個和弦圖就像一個由麥克·博斯托克建議。 在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只給您該行，所以我不知道如何隔離我想從淡入淡出的和弦。

任何想法？ 有什么提示嗎？

謝謝，

伊利莎

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