2

コード ダイアグラムを使用していますが、現在、コードが接続されているテキスト ラベルと灰色の境界線しか選択できません。

個々のコードを選択したいのですが、マウス機能を追加すると、ダイアグラムでランダムなコードが選択されます。

ここに画像の説明を入力

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

2 に答える 2

0

以下は、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はコード インデックスである必要がありますが、コードのソース インデックスとターゲット インデックスはコードグループを参照します。

于 2021-02-03T21:32:37.883 に答える