Simple Transitions

Showing how to use the transitions in D3.

by Fiddel

HTML

<div id="animation-examples"></div>

CSS

body {
    font-family:"Helvetica Neue";
    color: #686765;
}
.name {
    float:right;
    color:#27aae1;
}

circle {
    cursor: pointer;
}

JavaScript

var AnimationLibrary = {};

var svg;

AnimationLibrary.drawing = {
    setup: function (placement, width, height) {
        svg = d3.select(placement).append("svg").attr("width", width).attr("height", height).append("g");
        svg.append("circle").attr("class", "mycirc").attr("r", 5).attr("cx", 30).attr("cy", 30);
        
        d3.select("circle").on("mouseover", function() {
           AnimationLibrary.drawing.changeStyle("circle", "fill", "#27aae1",600,100); 
        }).on("mouseout", function() {
           AnimationLibrary.drawing.changeStyle("circle", "fill", "#F15A29",600,100); 
        })
    },

    changeAttribute: function (selector, attribute, value, duration, delay) {
        d3.selectAll(selector).transition().duration(duration).delay(delay).ease("elastic").attr(attribute, value);
    },

    changeStyle: function (selector, styleType, value, duration, delay) {
        d3.selectAll(selector).transition().duration(duration, delay).delay(delay).ease("linear").style(styleType, value);
    }
}

AnimationLibrary.drawing.setup("#animation-examples", 500, 500);

AnimationLibrary.drawing.changeAttribute("circle", "cx",200,300,300);
AnimationLibrary.drawing.changeStyle("circle", "fill", "#F15A29",600,600);
AnimationLibrary.drawing.changeAttribute("circle", "r",20,600,1500);