计算平均值以显示在 d3 圆环图的中心

Question

我有这个 plunkr 我正在使用 angularjs 和 d3.js。

我在这里生成了一些甜甜圈图，我想知道如何在圆弧中间显示数据的平均值而不是百分比。另外我将如何在弧上显示标签

svg.append("text")
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .attr("class", "inside")
        .text(function(d) { 
            return '56%'; 
        });

Answer 1

嗯，现在这个百分比显然是硬编码的。要用数据的平均值替换这个硬编码的百分比，你需要用数据的平均值替换 56%。

由于用于计算每个圆环图的数据数组很容易以data（最初为scope.data）的形式获得，因此您可以这样做来显示平均值：

svg.append("text")
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .attr("class", "inside")
        .text(function(d) { 
            return data.reduce(function(a, b) { return a + b } )/data.length;
        });

此外，正如亨利在 cmets 中指出的那样，更直接的方法是简单地使用 d3.mean 代替我在数组长度上的 reduce 函数。因此，代替那行，您只需输入：

            return d3.mean(data);

你可以看到结果in this Plunker。

任何支持 d3 的浏览器也应该支持我在此处使用的 ECMA5 reduce 方法，但是如果您打算将其与 r2d3 之类的 d3 shim 一起使用以尝试支持 IE8，则应包含 Array.prototype.reduce polyfill like this one from Mozilla。

关于标签的问题完全是另一个问题（您可能知道，StackOverflow 每个帖子只需要一个问题）。作为另一个问题提出这个问题，我很乐意在我们完成这个问题后尽快查看。