D3工具提示或條形圖上的鼠標懸停

Question

var bar = chart.selectAll("g") 
    .data(data) 
    .enter() 
    .append("g") 
    .attr("transform", function(d, i) { 
     return "translate("+barWidth*i+",0)"; 
    }) 
.on("mouseover", function() { 
    d3.select(this) 
    .attr("fill", "red"); 
}) 
.on("mouseout", function(d, i) { 
    d3.select(this) 
    .attr("fill", "blue"); 
}); 

我試圖做一個鼠標懸停來顯示數據。我開始嘗試根據上面的代碼更改鼠標懸停的顏色。

http://codepen.io/JohnnyBizzel/pen/xqbjVQ

Answer 1

我更新了​​

幾件事情錯在這裏：

1. 您正試圖將過渡應用到g，而不是rect
2. 而不是attr要使用style

Answer 2

這裏是解決方案：

.on("mouseover", function() { 
    d3.select(this).select('rect').style('fill', 'red'); 
}) 
.on("mouseout", function(d, i) { 
    d3.select(this).select('rect').style('fill', 'blue'); 
}); 

您需要選擇形狀，進入你的元素，他的風格功能來改變顏色。