条形图上的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

以下是解决方案：

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

您需要选择元素中的形状和样式函数来更改颜色。

Answer 2

我更新了您的codepen

这里有一些问题：

1. 您正尝试将转场应用于g而不是rect
2. 而不是attr您要使用style