如何在 d3.js 饼图中显示百分比

【问题标题】：How to display percentage to the d3.js piechart如何在 d3.js 饼图中显示百分比
【发布时间】：2015-03-02 00:20:16
【问题描述】：

我已经使用 nest、rollup 和 d3.sum 函数对数据集进行了汇总，并且我能够正确显示饼图。但是我无法根据总和显示每个切片的百分比。任何人都可以给关于这个问题的建议...

 Mycode:
 ======
   d3.csv("pi.csv", function(error, csv_data) {
         var data = d3.nest()
          .key(function(d) { return d.ip;})
          .rollup(function(d) {
           return d3.sum(d, function(g) {return g.value; });
          }).entries(csv_data);

        data.forEach(function(d) {
         d.ip= d.key;
         d.value = d.values;
        });

        My dataset:
        =========
        ip,timestamp,value
        92.239.29.77,1412132430000,3190
        92.239.29.77,1412142430000,319011
        92.239.29.78,1412128830000,545568
        92.239.29.78,1412130600000,616409
        92.239.29.78,1412132430000,319087
        92.239.29.76,1412130600000,616409
        92.239.29.76,1412132430000,319087

提前致谢

【问题讨论】：

标签： javascript csv d3.js

【解决方案1】：

因此，您似乎想在图表上显示每个饼图的百分比。您真正需要做的就是计算值的总和，并在数据变量中迭代并添加百分比。

data.forEach 函数不会向数据变量添加任何内容，所以我会放弃它。我还应该指出，d3.nest 函数汇总并汇总每个单独的 ip 条目，因此您不会得到所有值的总和。但是，使用 d3 很容易做到这一点，您可以使用 d3.sum:

var tots = d3.sum(data, function(d) { 
            return d.values; 
        });

完成后，您可以遍历数据变量，例如：

data.forEach(function(d) {
    d.percentage = d.values  / tots;
});

然后您可以使用 d.data.percentage 之类的方式访问每个饼图的百分比

把它全部放在together。

请注意，您还可以从每个切片的开始角度和结束角度计算百分比：(d.endAngle - d.startAngle)/(2*Math.PI)*100。

【讨论】：