D3.js將鼠標懸停在另一個上時突出顯示一個元素

我有使用D3.js製作的圓環圖。我想在懸停在相應的文本上時更改弧的顏色。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); 
      });

如果我添加的第一個註釋行，當我將鼠標懸停在任何的弧線文本中，第一個弧改變顏色。如果我刪除了第二行的註釋，則所有的弧在懸停在任何文本上時都會改變顏色。

來源

2016-11-10 MorganFR

這兩個答案很好地工作，我會讓社會決定哪一個應該被接受作爲答案。 – MorganFR

給每個路徑的唯一ID：

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

而且使用它盤旋時：

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

這裏是你的提琴：https://jsfiddle.net/d6839s03/

PS：你mouseout功能使一切灰色。

來源

2016-11-10 13:16:29

是的，'mouseout'沒有完全實現，因爲它使用了相同的功能。 – MorganFR

可以篩選正確的路徑是這樣的：

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

見https://jsfiddle.net/o98b8fsj/

來源

2016-11-10 13:17:13

D3.js將鼠標懸停在另一個上時突出顯示一個元素

回答

相關問題