DC.JS使用多列创建系列图

Question

我有下面的代码，我想在x轴上绘制日期，y轴应该在两个单独的系列上具有total和tip的值。这可能来自DC吗？

我找不到使用单独的列来确定系列的方法，而不是使用列来确定系列。

谢谢

  var data = [
  {date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
  {date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"},
  {date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"},
  {date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"},
  {date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}
];

data.forEach(function(d){
  var tempDate = new Date(d.date);
  d.date = tempDate;

})

var facts = crossfilter(data);

var dateDimension = facts.dimension(function(d){ return d.date; });
var dateGroup = dateDimension.group().reduceSum(function(d){ return d.total; });

var minDate = dateDimension.bottom(1)[0].date;
var maxDate = dateDimension.top(1)[0].date;



var runDimension = facts.dimension(function(d){ return [d.quantity, d.total, d.type]; });
var runGroup = runDimension.group().reduceSum(function(d) { return d.tip; });

var series = dc.seriesChart("#chart")
    .width(1360)
    .height(300)
    .margins({top:40,bottom:60,right:80, left:60})
    .chart(function(cht){ return dc.lineChart(cht).renderArea(true).interpolate('basis'); }) //change how it looks here 
    .dimension(dateDimension)
    .group(runGroup)
    .keyAccessor(function(d){ return d.key[1];}) //x axis
    .valueAccessor(function(d){ return d.value;}) //y axis
    .seriesAccessor(function(d){ return d.key[2];}) //group
    .legend(dc.legend().x(100).y(200).itemHeight(13).gap(5).horizontal(2).legendWidth(1360).itemWidth(70))
    .x(d3.time.scale().domain([minDate,maxDate]));


    dc.renderAll();

Answer 1

你是对的，crossfilter没有提供将行扩展到多个组合箱的方法。

当您想将数据转换为不同的形状以供dc.js阅读时，"fake group"是常用方法。

在这种情况下，我们可以创建两个组，一个用于提示，一个用于总计，然后使用假组合起来。

我们的主要维度是时间，所以不需要用数量，总数或类型来混淆密钥。

var totalGroup = dateDimension.group().reduceSum(function(d){ return d.total; });
var tipGroup = dateDimension.group().reduceSum(function(d){ return d.tip; });

这是假团体的生成器：

function combine_groups(groups) {
    return {
        all: function() {
            var parts = Object.keys(groups).map(function(gk) {
                return groups[gk].all().map(function(kv) {
                    return {key: [gk, kv.key], value: kv.value};
                })
            });
            return Array.prototype.concat.apply([], parts);
        }
    };
}

所有伪组都是遵循对象的交叉过滤器组约定的对象，具有返回数据的单个方法.all()。方便的是，这意味着每次绘制图表时都会检索和汇总数据，以便它可以对其他图表中的过滤器做出反应。

这里我们迭代提供给函数的组的名称。对于每个组，我们调用group.all()，然后映射键/值对，以便新键将组名作为第一个组件，并将旧键（在此示例中为日期）作为第二个组件。 / p>

像这样构建假组：

var seriesGroup = combine_groups({
    total: totalGroup,
    tip: tipGroup
});

将假组提供给系列图表，并告诉图表如何阅读结果的系列和关键（X值）组件：

series
    .keyAccessor(function(d){ return d.key[1];}) //x axis
    .seriesAccessor(function(d){ return d.key[0];}) //group

没有必要提供值访问器，因为查找kv.value是默认值。

这是结果。 （您可能希望重新考虑使用系列图表中的区域图表，因为区域将重叠。）

Example fiddle.

注意：完成此任务的另一种等效方法是使用复合图表;系列图表的大部分内容是拉开每个系列的数据，然后为复合图表实例化一堆子图表。

或者您可能只想使用堆积图表。但是你问过系列图表，它很有趣，所以你就是这样。