Javascript 将额外值插入d3图表序号域

我正在尝试创建一个带有图例的基本d3饼图。我遵循两个不同教程中的示例，但是一个示例中的代码与另一个示例中的代码不兼容。我想做的是设置一个有序刻度的域，这样我就可以用它来创建一个图例

在下面的一行中，我设置了域。如果我一步一步地浏览代码，我可以在得到[“启发式”、“广告软件”、“公司黑名单”、“PUP”、“可疑恶意软件”、“已知恶意软件”]后立即看到。这正是我想要的

color.domain(labels)

但是，如果我继续进行，一旦我到达以下行，域将更改为[“启发式”、“广告软件”、“公司黑名单”、“PUP”、“可疑恶意软件”、“已知恶意软件”，0、1、2、3、4、5]

arcs.append("svg:path")
    .attr("fill", function(d, i) { return color(i); } )
    .attr("d", arc);

问题：是什么导致这六个额外项目被插入域？

代码（）：

以下是到目前为止的图表：

---

您正在使用字符串设置有序缩放域，但随后使用索引号调用它。如果您为当前不在其域中的值询问序数刻度，它会将其添加到域中，并为其指定范围中的下一个值（或者在范围值用完时循环使用范围值）

原始代码：

arcs.append("svg:path")
    .attr("fill", function(d, i) { return color(i); } )
    .attr("d", arc);

应该是

arcs.append("svg:path")
    .attr("fill", function(d, i) {return color( d.data.name); } )
    .attr("d", arc);

d

值是由饼图函数创建的对象；它将原始数据对象存储为

d.data

。该数据中的名称是颜色比例域中使用的值之一

---

更新的fiddle:

p.S.如果您不喜欢不规则的颜色图案，请在按值排序数据后设置颜色比例域，或者告诉饼图函数不要使用：啊，我明白了。谢谢，你不仅解决了我的问题，而且我还学到了一个关于d3如何工作的好教训！

arcs.append("svg:path")
    .attr("fill", function(d, i) {return color( d.data.name); } )
    .attr("d", arc);