Question

当我将鼠标悬停在它们上方时，我想要更改填充的圆圈。我给他们＆＃34; pin＆＃34;课程和这里的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");
  });

我能够确定设置样式（＆＃34; fill＆＃34;，xxx）禁用悬停，但为什么？还有一种方法可以在保持悬停的同时获得瞬间过渡吗？

Answer 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");
  });

：）

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

1 个答案: