CODEWITHSUNDEEP
javascriptcssd3.jscoffeescriptdata-visualization
practicemakesperfect
practicemakesperfect

Reputation: 414

D3 with CSS Transition Animation

I am creating a bubble chart with D3. When I hover on each bubble, some information about that bubble appears and the color of the bubble changes, which is working properly now. What I want to do next is to make the color changing more nuanced. I was trying to create an animation with CSS with no avail

Here is my JavaScript code in visual.coffee:

  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)

Here is my style.css:

.bubble {
    fill: black;
}

.bubble-hover {
    fill: red;
}

If we follow the normal CSS animation route, I'd write a animation, like this: 

@keyframes gradual {
    0% { fill: black; }
    100% { fill: red; }
}

.bubble {
    fill: black;
}

.bubble-hover {
  animation: gradual 2s 1;
}

But this doesn't seem to work. So I figured I should work with D3's transition(). Unfortunately, my CoffeeScript skill is not solid, so I hope to get some help achieve this. Thanks!

Upvotes: 2

Views: 1124

Answers (1)

practicemakesperfect
practicemakesperfect

Reputation: 414

As @arjabbar pointed out, I forgot about the vendor prefixes. So basically what I need to do is to define

@-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;
}

This is a CSS solution to my problem, which is fine. If someone would like to solve it with d3 and CoffeeScript, I'd be happy to learn and choose it as the correct answer instead.

Upvotes: 1

Related Questions