dc.js: 支出跟踪器，以饼图显示每个月的分布情况

Question

我正在尝试制作一个饼图来显示每个月在不同 category.Like 的开支有了这些数据？

代码

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);      
});

完成后，您可以轻松地使用一张图表来过滤月份（或选择菜单图表）和您的饼图

dc.js: 支出跟踪器，以饼图显示每个月的分布情况

dc.js: expense tracker, show distribution for each month in a pie chart

d3.js

crossfilter

dc.js

代码

csv 数据