d3中级教程之一条渐渐延伸的线

效果如上图
demo及源码地址请点击
一直想用svg实现一条不断延伸的线的动画,想若是用到Linechart里貌似挺不错的,探索了几次,并且查看了别人的做法,最好的实现如下:
一, css实现
html写入:

css写入:

 svg {
        width: 800px;
        height: 800px;
    }
    path {
        stroke-width: 3;
        stroke: steelblue;
        fill: none;
        stroke-dasharray:900,900;
        stroke-dashoffset:900;
        -webkit-animation: 'draw' 5s linear alternate;
    }
    @-webkit-keyframes draw {
        from {
            stroke-dashoffset: 900;
        }
        to {
            stroke-dashoffset: 0;
        }
    }

Ok啦

二, 用d3js来实现
首先引入d3库
其次写下如下JS代码:

 var svg = d3.select("body")
        .append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .append("g");


var path = svg.append("path")
       .style("fill", "none")
       .style("stroke", "#000")
       .style("stroke-dasharray", "1000, 1000")
       .attr("d", "M0,35.22131329279762Q68.79999999999998,208.6160083254511,85.99999999999999,208.61462731675533C111.79999999999998,208.61255580371167,146.19999999999996,37.44013393066172,171.99999999999997,35.20750320583997S232.2,193.72835097156664,258,193.7304224846103S318.19999999999993,32.82756488680316,343.99999999999994,35.22131329279762Q361.19999999999993,36.81714556346059,430,209.68874519124003")
       .transition()
       .duration(4000)
       .styleTween("stroke-dashoffset", function() {
           return d3.interpolateNumber(1000, 0);
       });

我们想要的效果也就实现了.

解释一下:其实两个实现的原理是一样的,都是使用了一点小技巧,分别使用css3.0和D3的动画改变svg:path的stroke-dasharray和stroke-dashoffset属性值,其中前一属性把path变成一条虚实相间的线,后一属性决定这条虚实相间线的起始位置,技巧是把虚实相间的间隔设置到超过整条Path长度,以上我取了1000.

希望我的文章能帮助到你,更多资料请翻阅d3js.org,
我是朱现明,任职于精硕科技可视化部门前端开发,更多精彩的文章即将奉上.