D3 v4中的鼠標懸停事件和絃圖

Question

我試圖在Mike Bostock's v4 example和v3 example with mouseover events之後製作D3和絃圖。

在上面的第3版範例，有淡入淡出功能，突出特定ribbbons的mouseover'd組：

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

雖然我的生活，我不能讓它在我的V4例如工作儘管試圖把它放在一個類似點：

//Draw the ribbons that go from group to group 
g.append("g") 
    .attr("class", "ribbons") 
    .selectAll("path") 
    .data(function(chords) { return chords; }) 
    .enter().append("path") 
    .attr("d", ribbon) 
    .style("fill", function(d) { return color(d.target.index); }) 
    .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); }) 
    .on("mouseover", fade(.1))   /* Where attempt at mouseover is made */ 
    .on("mouseout", fade(1)); 
    .append("title"). 
    text(function(d){return chordTip(d);}) 

這裏是我嘗試的的jsfiddle（有工作提示，但非工作褪色鼠標懸停）：https://jsfiddle.net/wcat76y1/3/

我相信我的錯誤與我如何分離變量有關，但我不確定具體到哪裏出錯。

Answer 1

我設法弄清楚了。看起來好像有幾個問題混在一起混淆了我的嘗試解決方案。儘管我可以將此標記爲已解決，但我的解決方案仍然存在一些我不明白的因素。

1. 我將鼠標懸停事件添加到錯誤的部分（DOM元素？）。它應該已被添加到組元素而不是功能區元素上的操作。因此，應該已經在這裏了：

   //Draw the radial arcs for each group 
   group.append("path") 
       .style("fill", function(d) { return color(d.index); }) 
       .style("stroke", function(d) { return d3.rgb(color(d.index)).darker();  }) 
       .attr("d", arc) 
       .on("mouseover", fade(.1)) 
       .on("mouseout", fade(1)) 
   

2. 淡入功能使用svg.selectAll("ribbons")沒有選擇我想要的元素（我仍然不知道爲什麼不？）。更換該命令只用變量ribbons允許選擇成功完成：

   function fade(opacity) { 
       return function(d, i) { 
       ribbons 
        .filter(function(d) { 
         return d.source.index != i && d.target.index != i; 
        }) 
        .transition() 
        .style("opacity", opacity); 
       }; 
   } 
   

3. 其創建過程中添加<text>元素變量ribbons導致不透明度文本元素，而不是帶狀元件本身上進行修改。將其分離爲單獨的代碼行解決了最終的問題。

更新的jsfiddle顯示全工作例如：https://jsfiddle.net/wcat76y1/5/

Answer 2

我先前找到的答案的第2部分，我沒有工作，但這個沒有。

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

你只用絲帶的線條似乎沒有選擇正確的元素。我同意你所做的第一次更正，但沒有使用文本元素。

這是我的分叉小提琴https://jsfiddle.net/kLe38tff/