dc.js：费用跟踪器，在饼图中显示每个月的分配情况

Question

我正在尝试制作一个饼图，显示每个月在不同类别上的支出。例如，当我给出一月时，这些切片应显示食品杂货，燃料，租金等。如何使用此数据进行统计？

代码

function show_monthly_exp_distribution(ndx) {
    var dim = ndx.dimension(dc.pluck('Month'));
    var group = dim.group().reduceCount(dc.pluck());

    dc.pieChart("#exp-pie")
      .height(300)
      .width(800)
      .radius(70)
      .transitionDuration(1000)
      .dimension(dim)
      .group(group)
      .legend(dc.legend().gap(7));
  }

csv数据

Month,Utility Bills,Groceries,Dining Out,Fuel,Rent,totalexp
January,100,500,100,90,1000,1400
February,120,450,50,120,1000,1740
March,130,550,120,60,1000,1860
April,100,300,80,150,1000,1630
May,90,600,75,80,1000,1845
June,130,560,150,90,1100,2030
July,70,610,120,100,1100,2000
August,120,459,100,80,1100,1859
September,140,432,80,90,1100,1842
October,60,456,110,110,1100,1836
November,80,487,60,180,1200,2007
December,150,390,210,100,1200,2050

Answer 1

正如Gordon所建议的那样，首先更改数据格式，以便每行只有一个数据点。如果您无法更改csv上的数据，则可以在js中进行（代码未经测试，可能直接起作用...或不起作用；）

var data = [];
var type = "Utility Bills,Groceries,Dining Out,Fuel,Rent".split(",");
d3.csv("yourcsv", function(d) {
  type.forEach(function(c){
    data.push({month:d.month,type:c,amount:+d[c]});
  });
  return null; //doesn't matter what you return, discard the initial csv anyway)
}).then (function(dummy){
   ndx=crossfilter(data);      
});

完成此操作后，您可以轻松地使用一个图来过滤月份（或selectMenu图）和您的饼图