Question

我正在制作一个d3等值区，根据颜色化算法将初始fill属性值分配给：

  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样式之间某种相互作用的结果。

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

Answer 1

这是CSS的预期行为，并非SVG或D3独有。内联样式覆盖:hover样式。您可以使用!important覆盖它。

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

Answer 2

@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转换为内联样式 - 必须使用事件处理程序，就像上面的代码一样！

这受到this question的解决方案的启发。

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

2 个答案: