带有 CSS 过渡动画的 D3

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

带有 CSS 过渡动画的 D3

D3 with CSS Transition Animation

javascript

css

data-visualization

coffeescript

d3.js