Javascript C3/D3饼图图例格式/标签重叠

我有一个使用C3的图表。 我通过添加值和百分比更改了默认图例名称，现在

我正在寻找一种方法来很好地格式化这个图例，以便将值和百分比像列一样定位

有没有办法防止标签重叠

这就是我到目前为止取得的成绩：

var columns=['data11'，'data2'，'data347'，'data40098']；
var数据=[15025030050]；
变量颜色=['#0065A3'、'#767670'、'#D73648'、'#7FB2CE'、'#00345B']；
var=5；
var legendData=[]；
var sumTotal=0
//准备饼图数据
var columnData=[]；
var columnNames={}；
对于（i=0；itext”）；
//将rect添加到父级
var labelNode=textlab.node（）；
if（labelNode/*&&labelNode.innerHTML.length>0*/）{
var p=d3.select（labelNode.parentNode）.insert（“rect”，“text”）
.样式（“填充”、颜色[索引]）；
}
}
对于（var i=0；i0）{
设置超时（函数（列）{
图表.负荷({
栏目：[
columnData[列]，
]
});
//chart.data.names（columnNames[列]）
addLabelBackground（柱）；
}，（i*5000/列数据长度），i）；
}否则{
addLabelBackground（一）；
}
}
函数重绘LabelBackgrounds（）{
//所有的标签文字都画出来了吗
//所有的标签文字都画出来了吗
d3.选择（“#图表”）。选择全部（“.c3图表弧>文本”）。每个（函数（v）{
//获取d3节点
var标签=d3。选择（此）；
var labelNode=label.node（）；
//检查是否已绘制标签
if（labelNode）{
if（labelNode.childElementCount==0&&labelNode.innerHTML.length>0）{
//构建数据
var data=labelNode.innerHTML.split（“；”）；
标签文本（“”）；
data.forEach（函数（i，n）{
标签。附加（“tspan”）
.案文（i）
.attr（“dy”（n==0）？0：“1.2em”）
.attr（“x”，0）
.attr（“文本锚定”、“中间”）；
}，标签）；
}
//检查元素是否可见
if（d3.select（labelNode.parentNode）.style（“显示”）！==“无”）{
//获取标签文本的位置
var pos=label.attr（“transform”）.match（/-？\d+（\。\d+）/g）；
如果（pos）{
//TODO:指定文本的位置
//位置[0]=（位置[0]/h*90000）；
//位置[1]=（位置[1]/h*90000）；
//移除dy并移动标签
//d3.选择（this）.attr（“dy”，0）；
//d3.选择（this）.attr（“transform”，“translate”（+pos[0]+”，“+pos[1]+”））；
//获取标签的周围框
var bbox=labelNode.getBBox（）；
//现在绘制并移动矩形
d3.select（labelNode.parentNode）.select（“rect”）
.attr（“转换”、“平移”（+（位置[0]-（bbox.width+填充）/2）+
“，”+（位置[1]-bbox.height/labelNode.childElementCount）+”）
.attr（“宽度”，bbox.width+填充）
.attr（“高度”，bbox.height+填充）；
}
}
}
});
}

---

可以创建一个。然后，您可以在SVG或HTML中创建并设置您喜欢的样式

var columns=['data11'，'data2'，'data347'，'data40098']；
var数据=[15025030050]；
变量颜色=['#0065A3'、'#767670'、'#D73648'、'#7FB2CE'、'#00345B']；
var=5；
var legendData=[]；
var sumTotal=0
//准备饼图数据
var columnData=[]；
var columnNames={}；
对于（i=0；itext”）；
//将rect添加到父级
var labelNode=textlab.node（）；
if（labelNode/*&&labelNode.innerHTML.length>0*/）{
var p=d3.select（labelNode.parentNode）.insert（“rect”，“text”）
.样式（“填充”、颜色[索引]）；
}
}
对于（var i=0；i0）{
设置超时（函数（列）{
图表.负荷({