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

Question

我正在尝试使用图例创建基本的d3饼图。我在两个不同的教程中遵循这些示例，并且某个示例中的代码与另一个示例的编码效果不佳。我要做的是设置一个序数比例的域名，这样我就可以用它来创建一个图例。

在下一行中，我设置了域名。如果我单步执行代码，我可以在收到[“HEURISTIC”，“ADWARE”，“COMPANY_BLACK_LIST”，“PUP”，“SUSPECTED_MALWARE”，“KNOWN_MALWARE”]后立即查看。这正是我想要的。

color.domain(labels)

但是，如果我继续单步执行，一旦到达以下行，域名将更改为[“HEURISTIC”，“ADWARE”，“COMPANY_BLACK_LIST”，“PUP”，“SUSPECTED_MALWARE”，“KNOWN_MALWARE”， 0,1,2,3,4,5 ]

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

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

代码（http://jsfiddle.net/tonicboy/2urZY/5/）：

var w = 150,
    h = 100,
    r = 50,
    color = d3.scale.category20c(),
    dataset = [{"name":"HEURISTIC","value":65},{"name":"ADWARE","value":75},{"name":"COMPANY_BLACK_LIST","value":9},{"name":"PUP","value":34},{"name":"SUSPECTED_MALWARE","value":14},{"name":"KNOWN_MALWARE","value":156}],
    labels = _.pluck(dataset, "name");

color.domain(labels);

var chart = d3.select("#pie_chart")
    .append("svg:svg")
    .data([dataset])
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("viewBox", "0 0 " + w + " " + h)
    .attr("preserveAspectRatio", "xMinYMin meet");

var vis = chart.append("g")
    .attr("transform", "translate(" + (w - r) + "," + r + ")");

var arc = d3.svg.arc()
    .outerRadius(r);

var pie = d3.layout.pie()
    .value(function(d) { return d.value; });

var arcs = vis.selectAll("g.slice")
    .data(pie)
    .enter()
    .append("svg:g")
    .attr("class", "slice");

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

var legend = chart.append("g")
    .attr("class", "pie-legend")
    .selectAll("g")
    .data(color.domain())
    .enter()
    .append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * 7 + ")"; });

legend.append("rect")
    .attr("width", 5)
    .attr("height",5)
    .style("fill", color);

legend.append("text")
    .attr("x", 8)
    .attr("y", 9)
    .text(function(d) { return d; });

这是图表到目前为止的样子：

Answer 1

您正在使用字符串设置自定义比例域，但随后使用索引号调用它。如果您要求序数比例显示当前不在其域中的值，它会将其添加到域中并为其分配范围中的下一个值（或者如果它用完则回收范围值）。

原始代码：

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。该数据的名称是色标域中使用的值之一。

更新了小提琴：http://jsfiddle.net/2urZY/6/