Javascript 我试图并排显示两个进度条，但其中一个正在填充，另一个甚至没有，代码在不同的js函数中

下面是我在jsbin中尝试过的代码

.背景{
填充：#DFEAFD；
}
.前景{
填充：#2E7AF9；
}
.进度表{
.背景{
填充：#DFEAFD；
}
.前景{
填充：#2E7AF9；
}
正文{
字体系列：“Georgia”无衬线；
字体大小：90px；
}
.text2{
字体系列：“Georgia”无衬线；
字体大小：20px；
}
}
var测试=函数（）{
可变宽度=120，
高度=120，
twoPi=2*Math.PI，
进度=0，
总数=100，
formatPercent=d3.格式（“.0%”）；
var arc=d3.svg.arc（）
.startAngle（0）
.内半径（30）
.外层（45）
;
var svg=d3。选择（“.completion-chart1”）。追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（'fill'，'2E7AF9'）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var meter=svg.append（“g”）
.attr（“类别”、“进度表”）；
附加（“路径”）
.attr（“类别”、“背景”）
.attr（“d”，弧端角（twoPi））；
变量前景=米。追加（“路径”）
.attr（“类”、“前景”）；
变量文本=米。追加（“文本”）
.attr（“文本锚定”、“中间”）；
var i=d3.插值（进度，90/100）；
d3.transition（）.duration（1200）.tween（“进度”），函数（）{
返回函数（t）{
进度=i（t）；
前台属性（“d”，弧端角（twoPi*进度））；
text.text（格式百分比（进度））；
};
});
};
var test2=函数（）{
可变宽度=120，
高度=120，
twoPi=2*Math.PI，
进度=0，
总数=100，
formatPercent=d3.格式（“.0%”）；
var arc=d3.svg.arc（）
.startAngle（0）
.内半径（30）
.外层（45）
;
var svg=d3。选择（“.completion chart”）。追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（'fill'，'2E7AF9'）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var meter=svg.append（“g”）
.attr（“类别”、“进度表”）；
附加（“路径”）
.attr（“类别”、“背景”）
.attr（“d”，弧端角（twoPi））；
变量前景=米。追加（“路径”）
.attr（“类”、“前景”）；
变量文本=米。追加（“文本”）
.attr（“文本锚定”、“中间”）；
var i=d3.插值（进度，90/100）；
d3.transition（）.duration（1200）.tween（“进度”），函数（）{
返回函数（t）{
进度=i（t）；
前台属性（“d”，弧端角（twoPi*进度））；
text.text（格式百分比（进度））；
};
});
};
test（）；
test2（）；

我试图并排显示两个进度条，但其中一个正在填充，另一个甚至没有，代码在不同的js函数中 以下是该问题的屏幕截图：

---

我的代码是否有任何遗漏或错误。

当您使用

d3.transition（）.duration（1200）

时，您将转换应用于d3本身，它一次只能有一个转换。因此，如果您第二次调用

d3.transition（）.duration（1200）

，第一次转换将被取消，您将只在一个进度条上获得转换

而是通过使用将转换应用于仪表对象本身

d3.select(meter).transition().duration(1200)

d3.select(meter).transition().duration(1200)