Javascript 添加d3 svg.selectAll（“.foo”）.style（““fill”，…）覆盖.foo:hover css规则

我正在制作一个d3 choropleth，它根据着色算法将初始<代码>填充属性值分配给以下音调：

  svg.selectAll(".foo")
      .style("fill", function(d){ 
        return colorization(getRandomArbitrary(5,25)); //returns hex value
      })

这很有效。不幸的是，它似乎使我的CSS规则变得无关紧要。该规则不需要通过d3调用

.style（）

：

  .foo:hover{
    fill: white;
  }

我不确定这是d3.js正在做的事情，还是SVG样式和CSS样式之间某种相互作用的结果

---

我正在寻找一种解决方案，以实现算法着色，并继续允许：悬停填充效果。

这是CSS的预期行为，并非SVG或D3所独有。内联样式覆盖

：悬停
样式。您可以使用
覆盖它！重要信息

.foo:hover {
    fill: white !important;
}

@Alexander O'Mara的回答很好，但是，既然你说你在寻找一个解决方案来完成算法着色…，我只想让你注意另一个不同的方法

您可以使用以下行显式设置悬停效果：

svg.selectAll(".foo")
    .style("fill", function(d){ 
        return colorization(getRandomArbitrary(5,25)); //returns hex value
    })
    .on("mouseover", function() { d3.select(this).style("fill", "white") } )
    .on("mouseout", function() { function(d){ 
        return colorization(getRandomArbitrary(5,25));
    })

这样，您就不需要css文件中的任何内容—所以没有什么可以“覆盖”。：）

不幸的是，不能直接将“：hover”样式从css转换为内联样式-必须使用事件处理程序，就像上面的代码一样

这是受解决方案的启发。
谢谢。这对我来说太草率了。我没有意识到.style（）在内联中附加了样式，尽管回想起来很明显。