D3 和弦图 - 选择单个和弦答案

【问题标题】：D3 chord diagram - selecting individual chordsD3 和弦图 - 选择单个和弦
【发布时间】：2014-01-06 16:33:47
【问题描述】：

我正在使用和弦图，现在我只能选择文本标签和和弦连接的灰色边框。

我想选择单个和弦，但是，当我添加鼠标功能时，它会在图表中随机选择一个。

//works
svg.append("g")
        .selectAll("path")
        .data(chord.groups)
        .enter().append("path")
        .style("fill", function(d) {
            return fill(d.index);
        })
        .style("stroke", function(d) {
            return fill(d.index);
        })
        .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
        .on("mouseover", fade(.1))
        .on("mouseout", fade(1));

//doesn't work w/ mouseover
svg.append("g")
        .attr("class", "chord")
        .selectAll("path")
        .data(chord.chords)
        .enter().append("path")
        .style("fill", function(d) {
            //console.log(d.target.subindex)
            return fill(d.target.subindex);
        })
        .attr("d", d3.svg.chord().radius(innerRadius))
        //.style("opacity", 1)
        .on("mouseover", fade(.1))
        .on("mouseout", fade(1)); 

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

【问题讨论】：

在您的 fade 函数中，执行 d3.select(this).transition()...。

标签： d3.js fade chord-diagram

【解决方案1】：

我遇到了同样的问题，这是fade 函数中的选择器问题。该功能应如下所示。注意svg.selectAll("path.chord")

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

【讨论】：

【解决方案2】：

以下内容适用于 d3 6.5 版。注意事件处理函数签名和过滤条件的区别：

function fade(opacity) {
  return function (ev, d) {
    svg.selectAll("g.chord path")
      .filter(function(cd) {                   
        return cd.source.index != d.source.index || cd.target.index != d.target.index;
      })
      .transition()
      .style("opacity", opacity);
  };
}

OP中的参数i应该是和弦索引，而和弦源和目标索引是指和弦groups。

【讨论】：