使用 D3 过渡禁用 SVG 上的悬停 CSS答案

【问题标题】：Using D3 transitions disables hover CSS on SVG使用 D3 过渡禁用 SVG 上的悬停 CSS
【发布时间】：2014-06-19 14:53:39
【问题描述】：

当我将鼠标悬停在一些圆圈上时，我想更改它们的填充。我给他们“别针”类，这是他们的 CSS：

.pin {
    fill: #9ecae1;
    stroke:#3182bd;

}
.pin:hover{
    fill:steelblue;
}

每个图钉都有一个值，我想包含一些过渡，这样如果该值发生变化，圆圈会瞬间闪烁其他颜色，例如绿色。他们在没有更新的情况下工作正常。更新后，悬停不再起作用。

这是我的过渡代码： d[2] 只是一些键名。

svg.selectAll("circle").data(points, function(d) {return d[2];})
  .transition()
  .duration(500)
  .style("fill", "green")
  .attr("r", function(d) {return 5 + 10*Math.ceil(radius(d[3]));})
  .each("end", function(d){
    d3.select(this).transition()
      .style("fill", "#9ecae1");
  });

我能够确定设置 style("fill", xxx) 会禁用悬停，但为什么呢？有没有办法在保持悬停的同时获得瞬时过渡？

【问题讨论】：

你能不能开发一个小提琴，然后我们会在这方面做点什么......
为了制作一个“简化”版本，我做了这个小提琴：jsfiddle.net/5PHSc 基于chimera.labs.oreilly.com/books/1230000000345/…。因此，当您单击条形时，应该有一个过渡，使条形移动并变成红色。但是，悬停属性会丢失。

标签： javascript css svg d3.js

【解决方案1】：

我明白问题所在，在下面的代码中

svg.selectAll("circle").data(points, function(d) {return d[2];})
  .transition()
  .duration(500)
  .style("fill", "green")
  .attr("r", function(d) {return 5 + 10*Math.ceil(radius(d[3]));})
  .each("end", function(d){
    d3.select(this).transition()
      .style("fill", "#9ecae1");
  });

我们是通过内联样式应用颜色，这个内联比外部css更优先，所以不要使用内联样式应用颜色而是使用属性（填充）来填充颜色，我们的代码行必须改变的是删除.style("fill", "green") 并用attr("fill", "green") 替换它和.style("fill", "#9ecae1") 和.attr("fill", "#9ecae1") 下面是修改后的代码

svg.selectAll("circle").data(points, function(d) {return d[2];})
  .transition()
  .duration(500)
  .attr("fill", "green")
  .attr("r", function(d) {return 5 + 10*Math.ceil(radius(d[3]));})
  .each("end", function(d){
    d3.select(this).transition()
      .attr("fill", "#9ecae1");
  });

【讨论】：