D3.js 创建重叠多个饼图（圆形进度条）的问题

我有3个公司列表的指标要显示。我试图得到一个屏幕与3个圆形酒吧为每个公司

我不知道如何格式化数据以及如何解析数据以绘制条形图。现在只有一个值显示三次。我还使用CSV的一列来绘制浅灰色条，以完成圆形。我相信有更好的方法来完成我想要完成的事情，如果有人能帮我，我会很乐意的！非常感谢

请点击这里：

---

您的代码是一个很好的开始，但我会做一点不同的（和更简单的）：

身体{
字体：10px无衬线；
}
svg{
填充：10px 0 10px；
}
var colors=d3.scale.category10（）；
var半径=80，
填充=10；
//设置我们的3个弧
变量弧=[
d3.svg.arc（）
.外部（半径）
.内半径（半径-8），
d3.svg.arc（）
.外层（半径-10）
.内半径（半径-18），
d3.svg.arc（）
.外层（半径-20）
.内半径（半径-28）
];
//鉴于此csv数据
var csv=`公司，分数A，分数B，分数C
自然健康趋势，10,50,70
唯品会，90,23,76
Facebook，34,46,87`；
//清理数据
var data=d3.csv.parse（csv，函数（d）{
返回{
得分A:+d。得分A，
得分B:+d。得分B，
得分C:+d。得分C，
公司：d公司
}
});
//每一组弧的svg
var svg=d3。选择（“主体”）。选择全部（“饼”）
.数据（数据）
.enter（）.append（“svg”）
.attr（“类”、“派”）
.attr（“宽度”，半径*2）
.attr（“高度”，半径*2）
.附加（“g”）
.attr（“变换”、“平移”（“+radius+”，“+radius+”））；
//文本居中
svg.append（“文本”）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“中间”）
.text（函数（d）{返回d.company；}）；
//灰色和彩色弧的g
var g=svg.selectAll（“.arc”）
.数据（功能（d）{
返回[d.得分A，d.得分B，d.得分C]；
})
.输入（）
.附加（“g”）；
//灰色部分仅运行100%
g、 附加（“路径”）
.attr（“d”，函数（d，i）{
返回弧[i]({
startAngle:0，
端角：（2*Math.PI）
});
})
.样式（“填充”、“浅灰色”）；
//有色部分
g、 附加（“路径”）
.attr（“d”，函数（d，i）{
返回弧[i]({
startAngle:0，
端角：（d/100）*（2*Math.PI）
});
})
.样式（“填充”，功能（d，i）{
返回颜色（i）；
});

非常棒，谢谢马克！是的，代码更简单、更漂亮。

d3.csv("data.csv", function(error, data) {
  if (error) throw error;

  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Company"; }));

  data.forEach(function(d) {
    d.ages = color.domain().map(function(name) {
      return {name: name, metric: +d[name]};
    });

  });