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'); 
}); 

您需要选择形状，进入你的元素，他的风格功能来改变颜色。