Javascript 甜甜圈图表：显示内部百分比

在我的项目中，我使用d3.js创建了一个圆环图。页面加载时，图表中与第一个数据对应的部分将突出显示。单击每个部分后，它将相应地突出显示。到目前为止，它对我很管用。要求在下图中心显示当前选定部分的百分比

D3JS示例
var lastSelected=“”；
var firstSelected=“”；
可变宽度=450
高度=450
保证金=40
变量半径=数学最小值（宽度、高度）/2-边距
var normalArc=d3.arc（）.outerRadius（半径-30）、innerRadius（半径-70）；
var biggerArc=d3.arc（）.outerRadius（半径-80）。innerRadius（半径-10）；
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var data={a:9，b:20，c:30，d:8，e:12}
var color=d3.scaleOrdinal（）
.域名（数据）
.范围（[“#98abc5”、“#8a89a6”、“#7b6888”、“#6b486b”、“#a05d56”]）
var pie=d3.pie（）
.value（函数（d）{返回d.value；}）
var data_ready=pie（d3.条目（数据））
svg
.selectAll（'whatever'）
.数据（数据准备就绪）
.输入（）
.append（'路径'）
.attr（'d'，normalArc）
.attr（'fill'，函数（d）{return（color（d.data.key））}）
.attr（“笔划”、“黑色”）
.style（“笔划宽度”、“2px”）
.样式（“不透明度”，0.7）
.attr（'d'，函数（d，索引）{
//如果这是第一段，则使其成为更宽的圆弧
如果（索引==0）{
firstSelected=这个；
返回biggerrc（d）；
}否则{
返回正常弧（d）；
}
}).打开（“单击”，功能（d）{
如果（第一次选择）{
d3.选择（firstSelected）.attr（“d”，法线弧）
firstSelected=false；
}
如果（上次选中）{
d3.选择（lastSelected）.attr（“d”，法线弧）
}
d3.选择（this）.attr（“d”，biggerrc）
lastSelected=此；
})

获取数据中的总数：

var total = d3.sum(d3.values(data));

设置文本选择：

var centralText = svg.append("text")
    .attr("text-anchor", "middle");

centralText.text(d3.format(".0%")(d.value / total));

最后，将格式化的值传递给该选择：

var centralText = svg.append("text")
    .attr("text-anchor", "middle");

centralText.text(d3.format(".0%")(d.value / total));

以下是您的更新代码：

D3JS示例
var lastSelected=“”；
var firstSelected=“”；
可变宽度=450
高度=450
保证金=40
变量半径=数学最小值（宽度、高度）/2-边距
var normalArc=d3.arc（）.outerRadius（半径-30）、innerRadius（半径-70）；
var biggerArc=d3.arc（）.outerRadius（半径-80）。innerRadius（半径-10）；
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
风险值数据={
a:9，
b:20，
c:30，
d:8，
e:12
};
var总计=d3总和（d3值（数据））；
var centralText=svg.append（“文本”）
.attr（“字体大小”，“28px”）
.attr（“文本锚定”、“中间”）
.文本（d3.格式（“.0%”）（数据a/总计）；
var color=d3.scaleOrdinal（）
.域名（数据）
.范围（[“#98abc5”、“#8a89a6”、“#7b6888”、“#6b486b”、“#a05d56”]）
var pie=d3.pie（）
.价值（功能（d）{
返回d值；
})
var data_ready=pie（d3.条目（数据））
svg
.selectAll（'whatever'）
.数据（数据准备就绪）
.输入（）
.append（'路径'）
.attr（'d'，normalArc）
.attr（'fill'，函数（d）{
返回（颜色（d.data.key））
})
.attr（“笔划”、“黑色”）
.style（“笔划宽度”、“2px”）
.样式（“不透明度”，0.7）
.attr（'d'，函数（d，索引）{
//如果这是第一段，则使其成为更宽的圆弧
如果（索引==0）{
firstSelected=这个；
返回biggerrc（d）；
}否则{
返回正常弧（d）；
}
}).打开（“单击”，功能（d）{
centralText.text（d3.格式（“.0%”）（d.值/总计））
如果（第一次选择）{
d3.选择（firstSelected）.attr（“d”，法线弧）
firstSelected=false；
}
如果（上次选中）{
d3.选择（lastSelected）.attr（“d”，法线弧）
}
d3.选择（this）.attr（“d”，biggerrc）
lastSelected=此；
})