javascript - D3.js - Fading in data points sequentially -

i've started learning d3. i've made progress on learning, i've run haven't been able figure out on own.

here have far: http://tributary.io/inlet/83fba4500986b4638326

what i've been trying figure out how fade in data points line path animates through them. best idea had dividing transition time number of points , have delay each data point decided that, had trouble getting working properly.

is there reasonable way this?

p.s. seem have lost y-axis labels , not sure why... ideas?

thanks time , help!

so let's start easy part. y axis missing because svg elements have overflow:hidden , second svg element stuck top left of corner of first one. x,y space plus overflow:auto solve problem.

for fading circle when path go trought it, don't think can 1 transition. so, solution, because path drawing works on offset total length 0, can calculate distance between each circle , "transition" path circle circle, fading @ end of transition. so, circles coordinates, calculate distances, , set transition loop.

//get coordinates svg.selectall("circle").each(function(){   coordinates.push({x:d3.select(this).attr("cx"),y:d3.select(this).attr("cy")});   });  //get distances  for(var j=0;j<coordinates.length-2;j++)   {     var a,b,distance;     a= coordinates[j];     b= coordinates[j+1];     distance = math.sqrt((math.pow(b.x-a.x,2))+(math.pow(b.y-a.y,2)));     //console.log("j:" + j + " a: " + json.stringify(a) + " b: " + json.stringify(b) + " distance: " +  distance);     distancedata.push(distance)   }    //loop transition var countertransition =0,currentlength=distancedata[countertransition];           path         .attr("stroke-dasharray", totallength)         .attr("stroke-dashoffset", totallength)         .transition()           .duration(500)           .ease("cubic")           .attr("stroke-dashoffset",totallength-currentlength)         .attr("class", "line").each("end",animenext);    function animenext(){     countertransition +=1;     if(countertransition<=distancedata.length)     {       var circle =svg.selectall("circle")[0][countertransition];       circle=d3.select(circle);       circle.attr("opacity",0.5);       currentlength +=  distancedata[countertransition]  ;       path       .transition()       .duration(500)       .ease("cubic")       .attr("stroke-dashoffset",totallength - currentlength)       .attr("class", "line").each("end",animenext);;      } 

example : http://tributary.io/inlet/e2eab2e689479008f11c

i simplified data generation sake of test. removed draw on click. looks code executes 1 3 times randomly think tributary. can play duration improve transition smoothness.

hope helps!

edit: other solution 1 transition, using short interval(100ms) , checking if path's stroke-dashoffset equal or greater each circle's distance , if fade circle. clear interval @ end of transition.