dc.js系列图表多行

Question

我正在尝试创建2个图表,一个酒吧和一个系列,酒吧将显示每个商店的总收入,系列将显示每年的多行收入.

这是jsfiddle https://jsfiddle.net/xc4bwgLj/

因此,当我点击条形图商店1时,我想在系列图表中看到这个商店在2017年和2016年的新收入.目前,系列图表显示了每个商店的总收入,如条形图.

我知道如何更改系列图表以显示2016年和2017年每家商店的收益？

JsFiddle代码:

// generate data
var data = [];
var n = 1000.;

for (var i = 0; i < n; i++) {
console.log(Math.floor(Math.random() * (1 - 0 + 1)) + 0);
  data.push({
    id: (Math.floor(Math.random() * (1 - 0 + 1)) + 0),
    "i": i,
    x: Math.random(),
    "store_name": "Store"+(Math.floor(Math.random() * (1 - 0 + 1)) + 0),
    "2017_earnings": Math.random()*110,
    "2016_earnings": Math.random()*80
  });
}

// do some crossfilter stuff
var cf = crossfilter(data),
  series = cf.dimension(function(d) {
    return [d.store_name, d.i];
  }),
  series_grouped = series
  .group(function(d) {
  console.log(d)
    return [d[0], Math.floor(d[1] / 100.) * 100.];
  })
  .reduceSum(function(d) {
    return d.x;
  }),
  id = cf.dimension(function(d) {
    return d.store_name;
  }),
  id_grouped = id.group().reduceSum(function(d) {
    return d.x;
  });

// generate charts
var chart_width = 960,
  chart_height = 200;
console.log(dc);
dc.seriesChart("#chart_a").height(chart_height).width(.74 * chart_width)
  .chart(function(c) {
    return dc.lineChart(c).renderArea(true)
        .filterHandler(function(dimension, filter) {
        if(filter[0]) {
            dimension.filterFunction(function(d) {
            return d[1] > filter[0][0] && d[1] < filter[0][1];
          });
        } else {
            dimension.filterAll();
        }
        setTimeout(dc.redrawAll,0);
        return filter;
        });
  })
  .x(d3.scale.linear().domain([0, n]))
  .dimension(series)
  .group(series_grouped)
  .seriesAccessor(function(d) {
    return d.key[0];
  })
  .keyAccessor(function(d) {
    return d.key[1];
  })
  .valueAccessor(function(d) {
    return d.value;
  }).legend(dc.legend().x(350).y(350).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(70));
dc.barChart("#chart_b").height(chart_height).width(.24 * chart_width)
  .dimension(id)
  .group(id_grouped)
  .x(d3.scale.ordinal())
  .xUnits(dc.units.ordinal)
  .xAxis();

dc.renderAll();

Answer 1

这是使用不同数据形状的解决方案。我的另一个示例使用假组来更改聚合后的形状。

使用不同的数据形状。

在这种情况下，我认为数据的形状不利于您想做的事情，因此在这个答案中我将更改形状。我将尝试在第二个答案中使用假组。

系列图表采用具有多键的单个组，并且组按行进行筛选。由于每行都包含 2016 年和 2017 年的收入，因此无法使用 crossfilter 单独聚合它们。

因此，对于这次尝试，我按收益年份划分了记录：

for (var i = 0; i < n; i++) {
  var id = Math.round(Math.random()),
    x = Math.random(),
      store = "Store"+Math.round(Math.random());
  data.push({
    id: id,
    i: i,
    x: x,
    store_name: store,
    earnings_year: 2016,
    earnings: Math.random()*80
  });
  data.push({
    id: id,
    i: i,
    x: x,
    store_name: store,
    earnings_year: 2017,
    earnings: Math.random()*110,
  });
}

我认为这保留了原始数据的所有质量，但它按收益年份划分了记录。我还简化了随机数的生成。;-)

现在我们可以轻松创建使用的多键维度earnings_year。

我认为在组键函数中进行舍入不起作用，因为维度和组键函数需要具有相同的 ordering，所以我将其向上移动：

  series = cf.dimension(function(d) {
    return [d.earnings_year, Math.floor(d.i / 100.) * 100.];
  }),

earnings现在我们简单地使用相同的键进行分组，并减少而不是x（这就是我认为的意图）的总和。

  series_grouped = series.group()
  .reduceSum(function(d) {
    return d.earnings;
  }),

你的小提琴叉，通过商店过滤https://jsfiddle.net/gordonwoodhull/urxLwh81/