Javascript 使用D3转换将禁用SVG上的悬停CSS

我有一些圆圈，当我在上面悬停时，我想改变它们的填充。我给他们提供了pins类，下面是他们的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");
  });

---

我能够精确地确定设置stylefill，xxx禁用悬停，但为什么？有没有一种方法可以在保持悬停的同时获得瞬时转换？

我理解问题所在，即下面的代码

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优先级更高，因此不要使用内联样式应用颜色，而是使用attributefill填充颜色，我们必须更改的代码行是remove.stylefill，绿色，并将其替换为attrfill，绿色 和.stylefill，9ecae1和.attrfill，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");
  });

---

：

你能开发一把小提琴吗，然后我们会在这方面做些什么……制作一个简化版本我制作了这把小提琴：基于。因此，当你点击这些条时，应该会有一个使这些条移动并变成红色的过渡。但是，hover属性将丢失。