dc.js：费用跟踪器，在饼图中显示每个月的分布答案

【问题标题】：dc.js: expense tracker, show distribution for each month in a pie chartdc.js：费用跟踪器，在饼图中显示每个月的分布
【发布时间】：2019-06-09 21:57:21
【问题描述】：

我正在尝试制作一个饼图，显示每个月不同类别的费用。比如，当我给出一月份时，切片应该显示杂货、燃料、租金等。我怎样才能使用这些数据？

代码

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

【问题讨论】：

所以你的问题是“如何使用dc.pieChart？”`？
请说明您正在尝试做什么或出了什么问题 - 仅粘贴您的代码和数据并不能让我们继续工作。如果问题是“为什么所有切片的大小都相同？”，答案是 1）dc.pluck() 采用要提取的字段的名称（例如 'totalexp'），以及 2）您可能想要 reduceSum 而不是 reduceCount . Here's a working fiddle with your code/data.
感谢您为您的问题添加一些细节！
这里的棘手之处在于，crossfilter 通常按行分箱、过滤和聚合。如果您想将列显示为单独的项目，您最终需要做额外的工作来转换数据。 This question and answer shows how to do that - 对于行图或饼图来说，这基本上是同样的问题。此外，出于同样的原因，图表不会自然过滤。总而言之，dc.js 可能不是最适合这项工作的工具，但你可以让它发挥作用。
如果您可以将您的数据指定为Month,Type,Value（“扁平化数据”），那么使用交叉过滤器会更轻松。

标签： d3.js dc.js crossfilter

【解决方案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 图表）和您的饼图

【讨论】：