D3.js別の要素にカーソルを置いたときに要素を強調表示

Question

D3.jsを使ってドーナツチャートを作成しました。対応するテキストの上にカーソルを置いたときに弧の色を変更したいと思います。

私は最初の、またはすべての色を変更する方法を知っていますが、対応するものです。

Hereさんのコードです。強調表示を行う行は以下の通りです：私は弧内のテキストのいずれかの上にカーソルを移動最初のコメント行を追加する場合

  .on("mouseover", function(d,i){ 
       //d3.select(".donutArcSlices").transition().style("fill", "#007DBC"); 
       //d3.selectAll(".donutArcSlices").transition().style("fill", "#007DBC"); 
       div.transition()  
       .duration(200)  
       .style("opacity", .9);  
      div .html(d.name) 
       .style("left", (d3.event.pageX) + "px")  
       .style("top", (d3.event.pageY - 28) + "px"); 
      }) 
      .on("mouseout", function(d) {  
       d3.select(".donutArcSlices").transition().style("fill", "#3E4750"); 
       div.transition()  
       .duration(500)  
       .style("opacity", 0); 
      }); 

、最初のアークは、色を変更します。 2行目のコメントを削除すると、すべてのアークがテキストの上にカーソルを置くと色が変わります。

Answer 1

は、各パスに一意のID付け：

.attr("id", function(d,i){ return "donut"+i}) 

をそしてホバリングするときにそれを使用します。ここでは

d3.select("#donut" + i).transition().style("fill", "#007DBC"); 

は、あなたのフィドルがある：https://jsfiddle.net/d6839s03/

PS：あなたのmouseout機能は、すべてが灰色作っています。

Answer 2

次のような正しいパスフィルタできます

d3.selectAll(".donutArcSlices").filter(function(e, j){ return i === j}).style("fill", "#007DBC"); 

をどちらの答えがうまく機能しhttps://jsfiddle.net/o98b8fsj/