D3 Learning:Transitions

A starting point to clone and get investigating quickly.

by Sky Sigal

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="viz" />

JavaScript

$(function(){
    //Create a sized SVG surface within viz:
    var viz = d3.select("#viz")
    //set it up for svg:
        .append("svg")
        .attr("width", 500)
        .attr("height", 100);    
 
    //Some data:
    var data =[1,3,5];
    
    //Create a set: 
    var circle = 
        viz
        .selectAll('cicle')
        .data(data);
        
    //When new data is added to the set,
    //create a circle:
    circle
        .enter()
        .append("circle")
        .attr("cx", function(d,i){return d*75})
        .attr("cy", 50)
        .attr("r", function(d){return d})
        .style("stroke", "gray")
        .style("fill", "white")
        ;
    //make the transition from the previous value (there isn't any)
    //to now take a sec:
    circle
    .transition()
    .duration(1000)
        .delay(500)
        .style("fill", "aliceblue")
        .attr("r", function(d) { return d*10; })
        ;
   
    //Technique #1: Update the data of the 1st element    
    var subset = circle.filter(":nth-child(2)").datum(3);

    //But notice that the animation is being applied to all elements,
    //not just a subset, of the original set:
    subset
        .transition()
        //wait till the previous transition finishes before continuing...
        .delay(1000)
        .duration(1000)
        .attr("r", function(d) { return d*10; })
        .style("fill", "pink")
        ;
    
    
    //give the object some behaviour:
    circle.on("mouseover", function(){d3.select(this).style("fill", "blue");})
        .on("mouseout", function(){d3.select(this).style("fill", "white");});
 
});