如何在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函数汇总并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.data.percentage访问每个饼图切片上的百分比

把它们放在一起 。

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