javascript - 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 所指出的，我忘记了 vendor 前缀。所以基本上我需要做的是定义

@-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 解决它，我很乐意学习并选择它作为正确答案。