d3js和絃圖中的衰退和絃

我是一個d3js的初學者，所以如果我的問題看起來很笨，請耐心等待。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只給你的行，所以我不知道如何隔離我想從衰落中排除的和絃。

有什麼想法？任何提示？

謝謝

Elisa的

來源

2013-09-29 mellin

究竟你想要什麼褪色鼠標懸停？所有的和絃除了從高亮的那個開始的那些和絃？ –

謝謝拉爾斯。所有的和絃除了那些在高亮區域開始（或結束）的和絃。 – mellin

這樣就和例子一樣，不是嗎？ –

淡出一切，但當前elemeent，最簡單的方法是使用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-29 18:43:05

d3js和絃圖中的衰退和絃

回答

相關問題