d3 рисует линию с использованием stroke-dasharray и stroke-dashoffset

Question

У меня есть линейный график, и я хочу получить такой эффект, как рисование линии слева направо.

Мне удалось понять это с помощью stroke-dasharray и stroke-dashoffset.Это работает так, как я хочу, учитывая другие настроенные параметры.

var path = vis.append(‘svg:path’)
 .attr(‘d’, line(lineData))
 .attr(‘stroke’, ‘blue’)
 .attr(‘stroke-width’, 2)
 .attr(‘fill’, ‘none’);

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

path
     .attr(“stroke-dasharray”, totalLength + “ “ + totalLength)
     .attr(“stroke-dashoffset”, totalLength)
     .transition()
     .duration(5000)
     .ease(“linear”)
     .attr(“stroke-dashoffset”, 0);

Мой вопрос: а что, если я хотел бы иметь такой же эффект на пунктирной линии?

Потому что stroke-dasharrayнеобходимо использовать для превращения линии в пунктирную линию (например, (3,3)), комбинация stroke-dasharray и stroke-dashoffset запутается.

Какой самый простой способ сделать эффект рисования пунктирной линией слева направо?

Спасибо.