Q:

How can I simulate an axis 'growing' from range([0,0]) to my specified range in d3?

I am currently trying to transition both the x and y axis on this chart to 'grow out' from the bottom left corner from blank space into the way they currently look: 
http://bl.ocks.org/maharlikans/304443d2da3f479e20e3
I want the chart to 'grow out' from the bottom left corner of the screen, mostly just for aesthetic purposes. I thought initially that I could just set the range on each axis to [0, 0] around these lines: 
var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .3);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
    .range([height, 0]);

and then call .transition().duration(someduration).range([0, myrange]) around these lines: 
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Count");

but that didn't work. I thought maybe I have the right idea but am executing the code wrong. Could anyone think of a way to do this? 

A:

To grow in an axis using a transition would be like this:
// after the rest of the plot is drawn
// y 
y.range([height,height]); // set no axis
svg.select(".y.axis").call(yAxis); // draw it
y.range([height,0])
svg.select(".y.axis")
    .transition()
    .duration(1000)
    .call(yAxis); // transition it to "grown"
// x 
x0.rangeRoundBands([0, 0], .3);
svg.select(".x.axis").call(xAxis);
x0.rangeRoundBands([0, width], .3);
svg.select(".x.axis")
    .transition()
    .duration(1000)
    .call(xAxis);

You have to do this after the rest of the plot is created since having a range of [height, height] or [0,0] will mess up the placement of other elements.
Example Here

Another possible solution that works on the yaxis and xaxis g elements and does not mess with the .range at all:
  svg.select(".x.axis")
    .transition()
    .duration(1000)
    .attrTween("transform", slideX);

  function slideX() {
    var pos = (500-margin.top-margin.bottom);
    var interp = d3.interpolate( -pos * 2 , 0);
    return function(t) {
      return "translate("+interp(t)+","+ pos +")";
    }
  };

  svg.select(".y.axis")
    .transition()
    .duration(1000)
    .attrTween("transform", slideY);

  function slideY() {
    var pos = 960 - margin.left - margin.right;
    var interp = d3.interpolate(pos * 2, 0);
    return function(t) {
      return "translate(0," + interp(t) +")";
    }
  };

Example Here
This example is a little more fun; with this you scale in the axis, rotate, skew it, etc...

