线段生成器

线段生成

//code
 //    线段生成器
    var linePath = d3.svg.line()
    //        定义线段生成器的插值模式 可以去api中查其他模式
        .interpolate("cardinal-closed")
        //        自定义访问器规则
        .x(function (d) {
            return xScale(d[0]) + padding.left
        })
        //        自定义访问器规则
        .y(function (d) {
            return yScale(d[1]) + padding.top;
        })
        //        限制判断 满足条件才绘制
        .defined(function (d) {
            return d[0]<200
        });;
    //    使用线段生成器绘制一个五角星
    //    先初始化为0
    var path = svg.append("path").attr("d",linePath(dataSet.map(function (d) {return [0,0]  })));
    //    然后先设置缓动函数然后用线段生成器生成路径
    path.transition().duration(2000).ease("bounce").attr("d", linePath(dataSet)).attr("stroke", "purple").attr("stroke-width", 3).attr("fill", 'none');

结果

image.png