dc.js 一维以上的堆叠折线图

Question

我的数据集是 json 之类的数组：

var data = [ { company: "A", date_round_1: "21/05/2002", round_1: 5, date_round_2: "21/05/2004", round_2: 20 },
             ...
             { company: "Z", date_round_1: "16/01/2004", round_1: 10, date_round_2: "20/12/2006", round_2: 45 }]

并且我希望将 'round_1' 和 'round_2' 时间序列显示为堆叠折线图。

基线看起来像这样：

var fundsChart = dc.lineChart("#fundsChart");

var ndx = crossfilter(data);
var all = ndx.groupAll();

var date_1 = ndx.dimension(function(d){
  return d3.time.year(d.date_round_1);
})

fundsChart
  .renderArea(true)
  .renderHorizontalGridLines(true)
  .width(400)
  .height(360)
  .dimension(date_1)
  .group(date_1.group().reduceSum(function(d) { return +d.round_1 }))
  .x(d3.time.scale().domain([new Date(2000, 0, 1), new Date(2015, 0, 1)]))

我试过使用堆栈方法添加系列，但问题在于，只有一个维度可以作为 lineChart 的参数传递。

您能想出一个方法来显示两个系列，同时仍然使用 dc 图吗？

Answer 1

您要在此图表上进行过滤吗？如果没有，只需在 date_2 维度上创建一个不同的组并在堆栈中使用它。应该可以。

如果您要进行过滤，我认为您必须稍微更改一下数据模型。您需要切换为每轮有 1 条记录，因此在这种情况下，您现在拥有的每 1 条记录都会有 2 条记录。应该有 1 个日期属性（该回合的日期），一个金额属性（当前结构中 round_x 的内容）和一个 'round' 属性（例如“1”或“2”）。

然后您需要创建一个日期维度和该维度上的多个组。该组将有一个类似于以下内容的 reduceSum 函数：

var round1Group = dateDim.group().reduceSum(function(d) {
  return d.round === '1' ? d.amount : 0;
});

所以，这里发生的是，我们有一个组，它只会汇总第 1 轮的值。您将为第 2 轮创建类似的组，依此类推。然后将这些组堆叠在 dc.js 图表中。

希望对您有所帮助！

dc.js 一维以上的堆叠折线图

dc.js stacked line chart with more than 1 dimension

crossfilter

dc.js