2

私は d3js の初心者なので、私の質問がばかげているように見える場合は、しばらくお待ちください。

Mike Bostock が提案したようなコード グラフを再現しようとしています。Bostock のコードでは、円弧上にマウスを移動すると、円弧に含まれていないすべての和音 ( targetおよびsourceとして) がフェードします。

マウスがあるコードを除いてすべてのコードがフェードするように変更したいと思います (単一の双方向関係を強調するため)。

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は行のみを提供するため、フェードから除外したいコードを分離する方法がわかりません。

何か案が？ヒントはありますか？

ありがとうございました、

エリサ

4

1 に答える 1

4

現在の要素以外のすべてをフェードするthisには、現在の DOM 要素への参照を使用するのが最も簡単な方法です。

function fade_single(opacity) {
  return function() {
    var me = this;
    svg.selectAll("g.chord path")
        .filter(function(d) {
          return this != me;
        })
      .transition()
        .style("opacity", opacity);
  };
}
于 2013-09-29T18:43:05.183 に答える