基于d3开发可视化插件

码云：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()可以获取文字的长度。