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的参数传递。

你能想到在使用直流图表的同时显示两个系列的转变吗？

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叠加了超过1维的线图

1 个答案: