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

Question

我使用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

提前致谢

Answer 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。