Javascript 如何用其值的饼图表示每个数据条目？

假设我有以下简单的数据集

data

ID,A,B,C,D
a,0,1,0,0
b,1,1,1,0
c,0,0,1,1

使用标准更新模式为每个数据条目创建一个圆圈非常容易：

var course = d3.selectAll(".course")
  .data(data, d => d.ID);

course.enter()
  .append("circle")
  .attr("r", 10)
  .attr("class", "course");

course.exit().remove();

现在，我想使用列中的信息，用小饼图替换圆。饼图中应该每1有一块。例如，

b

应该用一个三段饼图表示（分别代表

a

、

b

和

C

）。以下是我已经尝试过的：

var course = d3.selectAll(".course")
  .data(data, d => d.ID);

course.enter()
  .each(function (c) {
    var values = d3.values(c)
      .splice(2, 5);

    var pie = d3.pie()(values);

    var arc = d3.arc()
      .innerRadius(0)
      .outerRadius(10);

    d3.select(this)
      .append("path")
      .attr("d", arc(pie));
  }

---

控制台中没有错误，但也没有饼图。。。不过，

pie

中的计算角度看起来不错。我做错了什么？我发现了这一点，但我不能对它掉以轻心。

我对该网站进行了一次快速而肮脏的更新，以展示如何做到这一点。这有用吗

var数据=[{
ID:'a'，
答:2,，
B:1，
C:1
},
{
ID:'b'，
答:1,，
B:1，
C:7
},
];
//定义边距、半径和颜色比例。色阶将为
//按索引分配。
var m=10，
r=100，
z=d3.scaleOrdinal（d3.schemeCategory 10）；
//为数据集中的每一行插入一个svg元素（带边距）。孩子
//元素将原点转换为饼图中心。
var svg=d3.选择（“主体”）.选择全部（“svg”）
.data（数据，d=>d.ID）
.enter（）.append（“svg”）
.attr（“宽度”（r+m）*2）
.attr（“高度”（r+m）*2）
.附加（“g”）
.attr（“转换”、“平移”（“+（r+m）+”，“+（r+m）+”）；
//每个svg元素的数据是一行数字（一个数组）。我们把它传给
//d3.计算每个圆弧的角度。这些开始角和结束角
//传递到d3.arc以绘制圆弧！
svg.selectAll（“路径”）
.data（（d，i）=>d3.pie（）（d3.values（data[i]）。拼接（1，5）））
.enter（）.append（“路径”）
.attr（“d”，d=>d3.arc（）。内半径（r/2）。外半径（r）（d））
.样式（“填充”，功能（d，i）{
返回z（i）；
})
.风格（“笔划”、“黑色”）
很难说清楚，它看起来是对的，路径被附加了吗？@joshrum但是是的，它们被附加了，但是它们都有值
d=“MNaN，NaNLNaN，NaNZ”
。我明天会看一看。现在，我可以确认的是，所有的值都是0或1（我在控制台中检查了它们）。@Jeroen我不确定您的数据的语义，确切地说，在0或1的情况下应该发生什么，所以我只是输入了不同的数据，以使演示更有趣。