D3，带有CSS过渡动画

Question

我正在用D3创建一个气泡图。 当我将鼠标悬停在每个气泡上时，会出现有关该气泡的一些信息，并且气泡的颜色会更改，现在可以正常使用了。 我接下来要做的是使颜色变化更加细微。 我试图用CSS创建动画无济于事

这是我在visual.coffee中的 JavaScript代码：

  mouseover = (d) ->
    node.classed("bubble-hover", (p) -> groupValue(p) == groupValue(d))
    d3.select("#group-info").html(d.group)

  mouseout = (d) ->
    node.classed("bubble-hover", false)

这是我的style.css ：

.bubble {
    fill: black;
}

.bubble-hover {
    fill: red;
}

如果我们遵循普通的CSS动画路线，我将编写一个动画，如下所示：

@keyframes gradual {
    0% { fill: black; }
    100% { fill: red; }
}

.bubble {
    fill: black;
}

.bubble-hover {
  animation: gradual 2s 1;
}

但这似乎不起作用。 所以我想应该使用D3的transition() 。 不幸的是，我的CoffeeScript技术并不牢固，因此希望获得帮助。 谢谢！

Answer 1

正如@arjabbar指出的那样，我忘记了供应商前缀。 所以基本上我需要做的是定义

@-webkit-keyframes gradual {
    0% { fill: black; }
    100% { fill: red; }
}

@-moz-keyframes gradual {
    0% { fill: black; }
    100% { fill: red; }
}

@keyframes gradual {
    0% { fill: black; }
    100% { fill: red; }
}

.bubble {
    fill: black;
}

.bubble-hover {
  -webkit-animation: gradual 2s 1;  /* Chrome, Safari, Opera */
  -webkit-animation-timing-function: ease-in;  /* Chrome, Safari, Opera */
  -moz-animation: gradual 2s 1;  /* Chrome, Safari, Opera */
  -moz-animation-timing-function: ease-in;  /* Chrome, Safari, Opera */
  animation-timing-function: ease-in;
  animation: gradual 2s 1;
  fill: red;
}

这是我的问题的CSS解决方案，很好。 如果有人想用d3和CoffeeScript解决它，我很乐于学习并将其选择为正确答案。