D3 path transition direction - d3.js

Question

I need some help with my following D3 line chart, where x is a time domain and y is linear scale value, currently in this fiddle, the transition of path occurs from right to left, but I want it to happen as left to right instead.
var data = [{"closedate":"2013-12-07T08:00:00.000Z","amount":60000}];
//Set Canvas Area properites
var margin = {top: 50, right: 50, bottom: 100, left: 100},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
//X value transformation function - transforms close date into chart x position of canvas
var x = d3.time.scale()
.range([0, width])
.domain(d3.extent(data, function(d) { return new Date(d.closedate); }));
//Y Value transformation function - transforms amount into y position of canvas
var y = d3.scale.linear()
.range([height, 0])
.domain(d3.extent(data, function(d) { return d.amount; }));
//X Axis Function
var xAxis = d3.svg.axis()
.scale(x)
//.tickFormat(d3.time.format('%m/%y'))
.ticks(6)
.orient("bottom");
//Y Axis Function
var yAxis = d3.svg.axis().scale(y).ticks(6).orient("left");
//Line Function to draw SVG Line
var line = d3.svg.line()
.interpolate("cardinal")
.x(function(d) { return x(new Date(d.closedate)); })
.y(function(d) { return y(d.amount); });
//Create SVG canvas area with height and width properites
var svg = d3.select("#d3linechartid").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//console.log("data = "+JSON.stringify(data));
//Draw XAxis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width )
.attr("y", "50")
.style("text-anchor", "middle")
.text("Close Date");
//Draw YAxis
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Sales Amount ($)");
//Draw SVG Path
var path = svg.append("path")
.datum(data)
.attr("d", line)
.style('fill', 'none')
.style('stroke', 'steelblue')
.attr("stroke-width", "2");
//Do Transistion of Path
var totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength+","+totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease("linear-in-out")
.attr("stroke-dashoffset", 0);

Answer 1

You can sort the input data in ascending order, like so:
data.sort(function(a, b){ return d3.ascending(a.closedate, b.closedate); });