Javascript D3-多个径向进度图

我是D3新手，正在尝试创建多个径向进度图。我有一个单一的工作，但不知道如何循环通过这在D3，使第二个显示出来

我使用的代码改编自我发现的JS FIDLE，它使用数据属性填充图形

文本显示时，它只是一个

标记，但使用的是D3，但我无法使图形与之匹配。我一直在对实现这一点的不同方法进行故障排除，但找不到任何好的文档或堆栈溢出答案来帮助我完成我需要的工作

谢谢

var wrapper=document.querySelectorAll（'.progress'）[0]；
var start=0；
var end=parseFloat（wrapper.dataset.percentage）；
变量颜色={
填写：“#2c3187”，
曲目：“#cec6bc”，
正文：“#2c3187”，
笔划：“#FFFFFF”，
}
var endAngle=Math.PI*2；
var formatText=d3.format（'.0%'）；
var-boxSize=200；
var计数=结束；
var进程=开始；
var步骤=结束<开始-0.01 : 0.01;
//定义圆
var circle=d3.svg.arc（）
.startAngle（0）
.内半径（100）
.外层（60）；
//设置SVG包装器
var svg=d3.select（包装器）
.append（'svg'）
.attr（'width'，boxSize）
.attr（'高度'，盒子尺寸）；
//添加组容器
var g=svg.append（'g'）
.attr（'transform'，'translate（'+boxSize/2+'，'+boxSize/2+'））；
//设置轨道
var track=g.append（'g'）；
track.append（'path'）
.attr（'fill'，colors.track）
.attr（'stroke'，colors.stroke）
.attr（'stroke-width'，7+'px'）
.attr（'d'，圆.端角（endAngle））；
//添加颜色填充
var值=track.append（'path'）
.attr（'class'，'radial path'）
.attr（'fill'，colors.fill）
.attr（'stroke'，colors.stroke）
.attr（'stroke-width'，7+'px'）；
//添加文本值
var numberText=track.append（'text'））
.attr（'class'，'radial text'）
.attr（'fill'，colors.text）
.attr（'text-anchor'，'middle'）
.attr（'dy'，'.8rem'）；
//行动
功能更新（进度）{
//更新端角的位置
value.attr（'d'，圆圈.endAngle（endAngle*进度））；
//更新文本值
numberText.text（formatText（progress））；
}
（函数iterate（）{
//调用update以开始动画
更新（进度）；
如果（计数>0）{
//将计数减少到0
计数--；
//增加进展
进度+=步骤；
//控制填充的速度
setTimeout（迭代，10）；
}
})();

图一

图二

您可以替换
文档.querySelectorAll（'.progress'）[0]包含变量而不是静态整数的部分

var nextChart = 0;
var wrapper = document.querySelectorAll('.progress')[nextChart];

然后让它在页面末尾递增，并将所有代码包装在一个函数中，然后再次遍历它

nextChart++

在此处发布了一个工作版本：

这不是一个很好的解决方案，但它应该能让您了解如何做到这一点。
解决方案足够简单，d3 noob可以理解！谢谢