d3版本：v4；

原理：path生成线条，通过 stroke-dasharray 和 stroke-dashoffset 属性实现；

个人理解：

stroke-dasharray：虚线间隔

stroke-dashoffset：虚线起点偏移

dom.getTotalLength()：获取 path 长度

间隔设为整个 path 的长度，起点偏移也设为整个 path 长度，然后，让起点偏移减到 0，就可以达到自己画自己的效果~

代码

// 生成svg,创建画布
let x = 300;
let y = 300;
_svg = d3.select(".svg")
         .append("svg")
         .attr("width", x)
         .attr("height", y);

// 画一个多边形---polygon
//这里手算了一个五角星坐标，其实是不知道怎样获取
let starPoints = '';
let starX= 30;  // 五角星边长
let starData = [{ x: .2 * starX, y: y }, { x: .8 * starX, y: y - 1.5 * starX }, { x: 1.4 * starX, y: y }, { x: 0, y: y - starX }, { x: 1.6 * starX, y: y - starX }];
starData.forEach(s=>{
  startPoints += `${s.x},${s.y} `;
});

let star = _svg.append("polygon")
               .attr("class","star-svg")
               .attr("points",starPoints)
               .attr("fill", "transparent")
               .attr("stroke", "red")
               .attr("stroke-width", 2);

// 获取五角星 path 长度
let starLen = document.querySelector(".star-svg").getTotalLength();

// 创建动画，线性 、3000ms
star.attr("stroke-dasharray",starLen )
    .attr("stroke-dashoffset",starLen )
    .transition()
    .ease(d3.easeLinear)
    .duration(3000)
    .attr("stroke-dashoffset",0);

ok，就是这样~
点击这里预览~