带有 CSS 过渡动画的 D3答案

【问题标题】：D3 with CSS Transition Animation带有 CSS 过渡动画的 D3
【发布时间】：2015-07-14 07:55:13
【问题描述】：

我正在使用 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 技能并不扎实，所以我希望能得到一些帮助来实现这一点。谢谢！

【问题讨论】：

您是否考虑了您的供应商前缀？ @-webkit-keyframes 还是@-moz-keyframes 等？
@arjabbar 啊，我明白了。我忘记了那些。让我添加它们并再试一次。我会告诉你。谢谢。
嗨@arjabbar！你说的对。这正是问题所在。感谢您的帮助！

标签： javascript css d3.js coffeescript data-visualization

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

【讨论】：