CODEWITHSUNDEEP
javascriptanimationd3.js
Alex H Hadik
Alex H Hadik

Reputation: 796

Animating d3 graph from bottom up

I'm trying to make a d3 Bar Graph animate from the x axis up upon load. Here is my code so far: 

$(document).ready(function(){
                        setTimeout(function(){
                    var t = 0, // start time (seconds since epoch)
                        v = 70, // start value (subscribers)
                        data = d3.range(4).map(next); // starting dataset

                    function next() {

                        return {
                            value: v = dataArray[t].length,
                            time: ++t
                        };
                    }

                    var w = 30,
                        h = 80;

                    var x = d3.scale.linear()
                        .domain([0, 1])
                        .range([0, w]);

                    var y = d3.scale.linear()
                        .domain([0, 100])
                        .rangeRound([0, h]);

                    var barPadding = 5;

                    var chart = d3.select("#revenue").append("svg")
                        .attr("class", "chart")
                        .attr("width", w * data.length + (data.length-1)*8)
                        .attr("height", h);

                    var rects = chart.selectAll("rect")

                        .data(data)
                        .enter().append("rect")

                        .attr("x", function(d, i) { return i*35; })
                        .attr("y", function(d) { return h - y(d.value) - .5; })
                        .attr("width", w)
                        .attr("fill", "white")
                        .attr("height", function(d) { return 0; });

                    rects.data(data)

                        .transition().duration(2000).delay(200)
                        .attr("height", function(d) { return y(d.value); })
                        .attr("y", function(d) {return h-y(d.value); });
                    },2000);
                    });

I know the answer lies within animating the Y position at the same time so that it gives the appearance of growing upwards, but no matter what I change, I can't get it to animate from the bottom up.

Upvotes: 0

Views: 721

Answers (1)

sam
sam

Reputation: 2486

            graph.selectAll("rect")
                  .append("animate")
                  .attr("attributeName","y")
                  .attr("attributeType","XML")
                  .attr("begin","0s")
                  .attr("dur","1s")
                  .attr("fill","freeze")
                  .attr("from",yaxis_offset)
                  .attr("to",function(d){return yscale(d.value);} );

          graph.selectAll("rect")
                  .append("animate")
                  .attr("attributeName","height")
                  .attr("attributeType","XML")
                  .attr("begin","0s")
                  .attr("dur","1s")
                  .attr("fill","freeze")
                  .attr("from",0)
                  .attr("to",function(d){return yaxis_offset-yscale(d.value);});

This is the code which worked for me to animate the barchart as you said... change the variable according to your need..

Upvotes: 2

Related Questions