Объяснение чертежа анимированной линии D3 требуется

Question

Я успешно внедрил некоторый код от this D3 example of animated line drawing, но я не мудрее, как это работает. Я был бы очень признателен за линейное разбиение того, как работает код. Я относительно новичок в D3; Я понимаю основы DOM-манипуляции с библиотекой, но я считаю, что для этого требуется промежуточный уровень понимания, которого мне не хватает.

Я включил ниже конкретную часть примера, которую я переработал. Я подозреваю, что умная часть связана в частях .attr("stroke-dashoffset", 0); & .attr("stroke-dashoffset", totalLength);, поэтому ясное объяснение того, как эти работы и как они способствуют эффекту, будут очень оценены.

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

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

svg.on("click", function(){ 
    path  
    .transition() 
    .duration(2000) 
    .ease("linear") 
    .attr("stroke-dashoffset", totalLength); 
}) 

Большое спасибо заранее

Answer 1

Интересный побочный эффект. В любом случае, свойства SVG дашара и dashoffset: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharrayhttps://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset.

Насколько я получил то, что он делает:

1. Initilize путь образец пунктира, как totallength видно, и totallength, не видимых
2. Установите dashoffset быть totallength первым, что делает только разрыв части видимой
3. Переход на dashoffset на 0, что делает видимым только черту.
4. При щелчке снова переходите к смещению черты totallength, делая снова видимую часть пробела.

Просто для игры, изменить настройку dasharray: .attr ("штрих-dasharray", totalLength/2 + "" + totalLength/2)