带有 CSS 过渡动画的 D3

Posted 2023-03-03

【中文标题】带有 CSS 过渡动画的 D3

【英文标题】：D3 with CSS Transition Animation

【发布时间】：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！你说的对。这正是问题所在。感谢您的帮助！

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