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.

    .attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
    .attr("stroke-dashoffset", 0);

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


Related Query