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%替换为数据＆＃ 39;平均值。

由于用于计算每个圆环图的数据数据随时可用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;
        });

另外，正如亨利在评论中指出的那样，更直接的方法是在数组长度上使用d3.mean代替我的reduce函数。所以，取而代之的是，你只需简单地说：

            return d3.mean(data);

您可以看到结果in this Plunker。

任何支持d3的浏览器也应该支持我在这里使用的ECMA5 reduce方法，但如果你计划使用像r2d3这样的d3 shim来尝试IE8支持，你应该包含Array.prototype.reduce polyfill {{ 3}}

关于标签的问题恰恰是另一个问题（您可能知道，StackOverflow每个帖子只需要一个问题）。把问题作为另一个问题，我很高兴看到我们尽快完成这个问题。

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

1 个答案: