D3.js d3甜甜圈图表的标签

我正在使用D3JS创建圆环图。我正在尝试向弧添加角度标签，如下图所示

这是我的工作代码

var宽度=300，
高度=300，
半径=数学最小值（宽度、高度）/2；
var color=d3.scale.ordinal（）
.范围（[“#6fc9e1”、“#00627d”、“#179bbf”]）；
var biggestrac=d3.svg.arc（）
.外层（半径-100）
.内半径（半径-60）；
var bigarc=d3.svg.arc（）
.外层（半径-100）
.内半径（半径-50）；
var smallarc=d3.svg.arc（）
.外层（半径-100）
.内半径（半径-40）；
/*var biggerrc=d3.svg.arc（）
.外层（半径-80）
.内半径（半径-70）*/
var pie=d3.layout.pie（）
.sort（空）
.价值（功能（d）{
回报率d%；
});
var svg=d3.选择（“#油炸圈饼”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
数据=[{
“标签”：“最大”，
“百分比”：33
}, {
“标签”：“大”，
“百分比”：17
}, {
“标签”：“小”，
“百分比”：50
}]
var g=svg.selectAll（“.arc”）
.数据（pie（数据））
.enter（）.append（“g”）
.attr（“类”、“弧”）；
g、 附加（“路径”）
.attr（“d”，函数（d）{
如果（d.data.label==“最大”）{
返回c（d）；
}else if（d.data.label==“大”）{
返回弧（d）；
}否则{
返回小弧（d）；
}
})
.样式（“填充”，功能（d）{
返回颜色（d.数据.标签）；
});
g、 追加（“文本”）//为每个切片添加一个标签
.attr（“转换”，函数（d）{
//将标签的原点设置为圆弧的中心
d、 内半径=0；
d、 外层=半径；
如果（d.data.label==“最大”）{
返回“translate（“+biggestrac.centroid（d）+”）；
}
else if（d.data.label==“大”）{
返回“translate（“+bigarc.centroid（d）+”）；
}
否则{
返回“平移（“+smallarc.centroid（d）+”）；
}
})
.attr（“文本锚定”、“中间”）
.text（函数（d，i）{
返回数据[i]。百分比+“%”；
})

正文{
字体：10px无衬线；
}
.弧形路径{
冲程：#fff；
}
正文{
字号：12px
}

---

计算所有必需的坐标将帮助您在正确的位置绘制标签和指针（

路径

）

我正要回答另一个类似的问题：

这里不再提供链接，而是一个使用这种方法的代码片段（我认为它比我前面提到的

polyline

方法更简单）

var宽度=300，
高度=300，
半径=数学最小值（宽度、高度）/2；
var color=d3.scale.ordinal（）
.范围（[“#6fc9e1”、“#00627d”、“#179bbf”]）；
var biggestrac=d3.svg.arc（）
.外层（半径-100）
.内半径（半径-60）；
var bigarc=d3.svg.arc（）
.外层（半径-100）
.内半径（半径-50）；
var smallarc=d3.svg.arc（）
.外层（半径-100）
.内半径（半径-40）；
/*var biggerrc=d3.svg.arc（）
.外层（半径-80）
.内半径（半径-70）*/
var pie=d3.layout.pie（）
.sort（空）
.价值（功能（d）{
回报率d%；
});
var svg=d3.选择（“#油炸圈饼”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
数据=[{
“标签”：“最大”，
“百分比”：33
}, {
“标签”：“大”，
“百分比”：17
}, {
“标签”：“小”，
“百分比”：50
}]
var piedata=pie（数据）；
var g=svg.selectAll（“.arc”）
.数据（piedata）
.enter（）.append（“g”）
.attr（“类”、“弧”）；
g、 附加（“路径”）
.attr（“d”，函数（d）{
如果（d.data.label==“最大”）{
返回c（d）；
}else if（d.data.label==“大”）{
返回弧（d）；
}否则{
返回小弧（d）；
}
}).样式（“填充”，功能（d）{
返回颜色（d.数据.标签）；
});
g、 追加（“文本”）//为每个切片添加一个标签
.attr（“转换”，函数（d）{
//将标签的原点设置为圆弧的中心
d、 内半径=0；
d、 外层=半径；
如果（d.data.label==“最大”）{
返回“translate（“+biggestrac.centroid（d）+”）；
}
else if（d.data.label==“大”）{
返回“translate（“+bigarc.centroid（d）+”）；
}
否则{
返回“平移（“+smallarc.centroid（d）+”）；
}
})
.attr（“文本锚定”、“中间”）
.text（函数（d，i）{
返回数据[i]。百分比+“%”；
});
var labels=g.append（'g'）。classed（'labels'，true）；
标签。选择全部（“文本”）。数据（piedata）
.输入（）
.append（“文本”）
.attr（“文本锚定”、“中间”）
.attr（“x”，函数（d）{
var a=d.startAngle+（d.endAngle-d.startAngle）/2-Math.PI/2；
d、 cx=数学cos（a）*（半径-75）；
返回d.x=数学cos（a）*（半径-20）；
})
.attr（“y”，函数（d）{
var a=d.startAngle+（d.endAngle-d.startAngle）/2-Math.PI/2；
d、 cy=数学sin（a）*（半径-75）；
返回d.y=数学sin（a）*（半径-20）；
})
.text（函数（d）{return d.data.label；}）
.每个功能（d）{
var bbox=this.g