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解決它，我很樂於學習並將其選擇為正確答案。