score:1

Accepted answer

Based on the comments of Hugues Moreau it does not seem possible to achieve the result with a single path, so I've created a work-around for myself.

At the start there's an array with data, with the null-values in it. I create a new array and add sub-arrays to this array.

var newObjectArray = [];
var duration = 2000;
var duration_per_point = duration / d.values.length;
var delay = 0;
var start = 0;
for (var j = 0; j < d.values.length; j++)
{
   if (isNaN(d.values[j].y))
   {
       var tempArray = d.values.slice(start, j);
       newObjectArray.push(tempArray );
       start = j;
    }
 }
 newObjectArray.push(d.values.slice(start, j));

for each array in the newObjectArray I now draw a path, and add delay to the transition.

linePath
    .attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
    .transition()
    .duration(duration_per_point*newObjectArray[k].length)
    .delay(delay)
    .ease(d3.easeLinear)
    .attr("stroke-dashoffset", 0);

delay += duration_per_point * newObjectArray[k].length;

jsfiddle: https://jsfiddle.net/9kknu8du/4/


Related Query