如何决定dc.js中的维度和组?

时间:2018-06-05 16:19:32

标签: d3.js dc.js crossfilter

我是dc.js的新手,面临着决定维度和群体的问题。我有这样的数据

this.data = [
    {Type:'Type1', Day:1, Count: 20},
    {Type:'Type2', Day:1, Count: 10},
    {Type:'Type1', Day:2, Count: 30},
    {Type:'Type2', Day:2, Count: 10}
]

我必须显示两个折线图的复合图表,一个用于Type1,另一个用于Type2。我的x轴将是Day。所以我的一个维度将是Day

var ndx = crossfilter(this.data);
var dayDim = ndx.dimension(function(d) { return d.Day; }) 

如何进行分组?如果我在Count上执行,那么特定日期的总计数就显示出我不想要的。

2 个答案:

答案 0 :(得分:1)

尽管Gordon建议的工作完全正常,但如果您想使用复合图表获得相同的结果,那么您可以使用group.reduce(add, remove, initial)方法。

function reduceAdd(p, v) {
  if (v.Type === "Type1") {
    p.docCount += v.Count;
  } 
  return p;
}

function reduceRemove(p, v) {
  if (v.Type === "Type1") {
    p.docCount -= v.Count;
  } 
  return p;
}

function reduceInitial() {
  return { docCount: 0 };
}

以下是一个示例:http://jsfiddle.net/curtisp/7frw79q6

引用Gordon

  

系列图表只是一个复合图表,可以自动拆分数据并生成子图表。

答案 1 :(得分:0)

您的问题并不完全清楚,但听起来您希望按TypeDay分组

一种方法是使用复合键:

var typeDayDimension = ndx.dimension(function(d) {return [d.Type, d.Day]; }),
    typeDayGroup = typeDayDimension.group().reduceSum(function(d) { return d.Count; });

然后,您可以使用系列图表在复合图表中生成两个折线图。

var chart = dc.seriesChart("#test");
chart
    .width(768)
    .height(480)
    .chart(function(c) { return dc.lineChart(c); })
    // ...
    .dimension(typeDayDimension)
    .group(typeDayGroup)
    .seriesAccessor(function(d) {return d.key[0];})
    .keyAccessor(function(d) {return +d.key[1];}) // convert to number
    // ...

有关详细信息,请参阅the series chart example