码云：https://gitee.com/527184687/d3-test
d3 API https://github.com/tianxuzhang/d3.v4-API-Translation
2019-11-8 环形图
2.gif
1.png
settings 是设置参数
this.settings = {
border: 2, //最外层边框宽度
borderColor: '', //最外层边框颜色
color: '', //主体颜色
radius: [20, 110], //内环和外环大小，单位像素
center: [0.25, 0.5], //圆心坐标百分比
startAngle: 0 //起始角度
}
2.png
主要使用了d3.arc 生成弧形函数，api文档中有中文介绍。
3.png
中间文字是一个棘手的问题。一开始使用wrapWord，觉得很复杂，放弃掉了。
后来想到了，d3.arc 可以获取圆心，dom.getBoundingClientRect() 可以获取text标签的高度和宽度，dom.getComputedTextLength()可以获取文字的长度。
网友评论