svg path as directional animation

by Nivaldo

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
  <div id="line"></div>

CSS

.axis path,


.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;

  stroke-width: 1.5px;
}

JavaScript

var w = 600;
    var h = 500;

    var svg = d3.select("#line")
      .append("svg")
      .attr("width", w)
      .attr("height", h);


 /*d3.text("new.csv", function(text) {
 var data = d3.csv.parseRows(text).map(function(row) {
    return row.map(function(value) {
      return +value;
    });
  });*/
	
	
	
	var data=[{x:100, y:400},
                    {x:120, y:380},
                    {x:140, y:360},
					{x:170, y:340},
					{x:190, y:320},
					{x:200, y:300},
					{x:210, y:283},
					{x:230, y:280},
					{x:270, y:280},
					{x:310, y:280},
					{x:330, y:280},
					{x:340, y:280},
					{x:367, y:280},
					{x:369, y:278},
					{x:372, y:276},
					{x:387, y:260},
					{x:397, y:240},
					{x:400, y:234},
					{x:420, y:222},
					{x:437, y:202},
					{x:442, y:192},
					{x:460, y:176},
					{x:480, y:159},
                    {x:500, y:130}];
    var x = d3.scale.linear().domain([10, 100]).range([0, w]);
    var y = d3.scale.linear().domain([10, 10]).range([h, 0]);
	
	
	 var xAxis = d3.svg.axis()
    .scale(x);
    //.orient("bottom");
	
	 var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

	
   var line = d3.svg.line()
     // .interpolate("cardinal")
      .x(function(d){return d.x;})
      .y(function(d){return d.y;});


/*	 var gAxis = svg.append("g")
    .attr("class", "x axis")
	 .attr("transform", "translate(0," + h + ")")
    .call(xAxis); */


      svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
  	
	  
    var path = svg.append("path")
      .attr("d", line(data))
      .attr("stroke", "orange")
      .attr("stroke-width", "4px")
      .attr("fill", "none");

    var totalLength = path.node().getTotalLength();

    path
      .attr("stroke-dasharray", totalLength + " " + totalLength)
      .attr("stroke-dashoffset", totalLength)
      .transition()
        .duration(7000)
        //.ease("linear")
        .attr("stroke-dashoffset", 0);