Using Transitions in D3

In this article we are going to discuss another interesting feature of D3. That is Transiton. To make the view appealing to the user, we have used animations. Transition is also a form of application which we can use in D3. So, what is this transition?

What is Transitions?

A transition is a special type of selection where the operators apply smoothly over time rather than instantaneously. We can derive a transition from a selection using the transition operator. While transitions generally support the same operators as selections (such as attr and style), not all operators are supported; for example, we must append elements before a transition starts. A remove operator is provided for convenient removal of elements when the transition ends.

Transitions may have per-element delays and durations, computed using functions of data similar to other operators. This makes it easy to stagger a transition for different elements, either based on data or index. D3 has many built-in interpolators to simplify the transitioning of arbitrary values. For instance, we can transition from the font string “500 12px sans-serif” to “300 42px sans-serif”, and D3 will find the numbers embedded within the string, interpolating both font size and weight automatically.

Only one transition may be active on a given element at a given time. However, multiple transitions may be scheduled on the same element; provided they are staggered in time, each transition will run in sequence. If a newer transition runs on a given element, it implicitly cancels any older transitions, including any that were scheduled but not yet run.

Transitions Are a Form of Animation:

Transitions are a limited form of key frame animation with only two key frames: start and end. The starting key frame is typically the current state of the DOM, and the ending key frame is a set of attributes, styles and other properties. Transitions are well-suited for transitioning to a new view without complicated code that depends on the starting view.

Example transition:

d3.select("body").transition().style("color", "red");

Although only a single attribute value is specified—the color red—a second value is implied. This starting value is computed from the DOM via getComputedStyle or getAttribute.

If the transition has a delay, then the starting value should be set only when the transition starts. You can do this by listening for the start event:

This is a new feature in 3.0; older versions of D3 dispatched the start event after constructing tweens.

d3.select("body").transition()
    .delay(750)
    .each("start", function() { d3.select(this).style("color", "green"); })
    .style("color", "red");

The most explicit approach to set the starting value is to use transition.styleTween. This skips computing the starting value from the DOM by specifying the both values and an interpolator.

d3.select("body").transition()
    .styleTween("color", function() { return d3.interpolate("green", "red"); });

Let us look through a complete code for better understanding.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>

   <style type="text/css">
div{
    background-color: #dd9;
    margin: 5px;
    font-size: 25px;
    color: #007;
    padding: 10px;

}
</style>
</head>
<body>
    <div id="viz"></div>
    <script type="text/javascript">

    var sample = d3.select("#viz")
    .append("svg")
    .attr("width", 100)
    .attr("height", 100);    
    
sample.append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 40)
    .attr("cx", 50)
    .attr("cy", 50)
  .transition()
    .delay(100)
    .duration(1000)    
    .attr("r", 10)
    .attr("cx", 30)
    .style("fill", "black");
    
    </script>
</body>

</html>

In the above example we can see a white circle over a colored film which turns black and also gets small after a delay from form loading.

In this article we have discussed about transition and it’s basic implementation. We will discuss other things in next article.

If you find this article helpful, you can connect us in Google+ and Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *