CODEWITHSUNDEEP
d3.js
piratebroadcast
piratebroadcast

Reputation: 291

How to animate a horizontal D3 bar chart?

I am currently working with this D3 bar chart: http://bl.ocks.org/juan-cb/faf62e91e3c70a99a306 I would like to simply animate the chart on page load, to fill from left to right. I have seen other snippets of .transform around but cannot seem to grok how to add the animation to my chart correctly. Anyone mind having a look? Whenever I make changed locally (I have basically the same chart installed in my web app) the chart disappears completely and it looks like I have a syntax error somewhere.

Upvotes: 2

Views: 6662

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

For transitioning from left to right, you just need to set the initial width to zero and the, after transition(), to its final value:

 bar.append("rect")
        .attr("transform", "translate("+labelWidth+", 0)")
        .attr("height", barHeight)
        .attr("width", 0)//this is the initial value
        .transition()
        .duration(1500)//time in ms
        .attr("width", function(d){
            return scale(d.value);
        });//now, the final value

Here is the fiddle: https://jsfiddle.net/8v88gwqn/

Also, you can use a delay to transition each bar separately:

    bar.append("rect")
        .attr("transform", "translate("+labelWidth+", 0)")
        .attr("height", barHeight)
        .attr("width", 0)
        .transition()
        .duration(1500)
        .delay(function(d,i){ return i*250})//a different delay for each bar
        .attr("width", function(d){
            return scale(d.value);
        });

Here is the fiddle with the delay: https://jsfiddle.net/8v88gwqn/1/

Upvotes: 6

Related Questions