Animating Svg Paths with Discontinuous Parts

Animating SVG paths with discontinuous parts

Here is an approach using several path elements and using animation-delay to make the lines draw one after the other :

path{  stroke-dasharray:10;  stroke-dashoffset:10;  fill:none;  stroke:#000;}path:nth-child(1){animation:draw1 4s linear infinite}path:nth-child(2){animation:draw2 4s linear infinite}path:nth-child(3){animation:draw3 4s linear infinite}path:nth-child(4){animation:draw4 4s linear infinite}@keyframes draw1{  20%,100%   {stroke-dashoffset:0; }}@keyframes draw2{  20%    {stroke-dashoffset:10;}  40%,100%   {stroke-dashoffset:0; }}@keyframes draw3{  40%    {stroke-dashoffset:10;}  60%,100%   {stroke-dashoffset:0; }}@keyframes draw4{  60%    {stroke-dashoffset:10;}  80%,100%   {stroke-dashoffset:0; }}

<svg width="220px" height="100px" viewBox="0 0 10 11">  <path d="M0,1  h10" />  <path d="M0,4  h10" />  <path d="M0,7  h10" />  <path d="M0,10 h10" />  </svg>

SVG animate stroke-dashoffset behaving oddly

Did you think 100% would be 100% of the length of the path? If so that's where you're going wrong as it's 100% of the viewport width. I don't think Opera and Firefox have a bug here, particularly as they happen to be displaying things identically.

d3 linechart transition with missing data

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/

Problem with interface

Your Avatar.Cred property is of type Account, not IAccount... but LogOn is declared to return just IAccount. So it could return some other IAccount implementation - the compiler won't let you just assume that the IAccount will be an Account without an explicit cast.

Options:

Change the type of the Cred property to IAccount instead of Account. This is probably best as it reduces the coupling between Avatar and Account, so you can use other implementations of IAccount.
Change the return type of LogOn to Account instead of IAccount. This ties the LogOn API to Account, instead of just the implementation.
Cast when you assign the property:
```
avatar.Cred = (Account) LogOn();
```

Animating Svg Paths with Discontinuous Parts