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

时间:2015-01-04 06:16:57

标签: javascript csv d3.js

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

提前致谢

1 个答案:

答案 0 :(得分:10)

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

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