如何在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

把它们放在一起.

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