实现环形进度条,效果如下图,代码见codePen
可以调整参数
var data= [{process:0, // 进度 100为满lineWidth:20, // 进度条宽radius:100, // 圆形进度条中心线的半径fill:'#1c7abc', // 进度条颜色stroke:'white', // 进度条边框颜色strokeWidth:2, // 进度条边框宽度x:width/2, // 圆形进度条的中心坐标xy:height/2,// 圆形进度条的中心坐标ystartAngle:-Math.PI /2// 起始角度,0为3点钟方向}];
d3的数据绑定,用data()传入输入数组,画圆的时候可以批量画。
d3上来先selectAll虽然没有,表示后面操作的基数,enter表示若有新增数据,会新增到dom里面。更新数据需要自己刷新展示。和vue这种数据绑定不一样,不是改数据就会触发视图刷新,修改数据后,需要调用变更的方法。比如这个path改了,就使用 path.attr("d", draw)重新更新进度。
主要是path,d的画法,用4条曲线实现环形进度条。
path里面的d的M表述移动到点不绘制线,L表示画线,A表示画圆圆形等,最后Z表示闭合曲线。具体参考MDN说明
这里A的参数和D3里面的path.arc参数不同,看一下arc的官方说明。
# path.arc(x, y, radius, startAngle, endAngle[, anticlockwise]) <>
Draws a circular arc segment with the specified center ⟨x, y⟩, radius, startAngle and endAngle. If anticlockwise is true, the arc is drawn in the anticlockwise direction; otherwise, it is drawn in the clockwise direction. If the current point is not equal to the starting point of the arc, a straight line is drawn from the current point to the start of the arc. Equivalent to context.arc and uses SVG’s elliptical arc curve commands.