Question

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

我正在尝试重现像Mike Bostock提出的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只给你一行，所以我不知道如何隔离我想要从淡入淡出中排除的和弦。 / p>

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

谢谢，

Elisa的

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

d3js和弦图中的褪色和弦

1 个答案: