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

我更新了您的codepen

这里有一些错误:

1. 您正在尝试将过渡应用于 g 而不是 rect
2. 您想使用style而不是attr