如何填补 dc.js 系列图表中的空白？

Question

我有以下 dc.js series chart:

var data = [
  {day: 1, service: 'ABC', count: 100},
  {day: 2, service: 'ABC', count: 80},
  {day: 4, service: 'ABC', count: 10},
  {day: 7, service: 'XYZ', count: 380},
  {day: 8, service: 'XYZ', count: 400}
];
var ndx = crossfilter(data);
var dim = ndx.dimension(function (d) { return [d.service, d.day]; });
var grp = dim.group().reduceSum(function(d) { return +d.count; });
var chart = dc.seriesChart('#graph')
  .width(620)
  .height(175)
  .chart(function(c) { return dc.lineChart(c).renderArea(true);})
  .dimension(dim)
  .group(grp)
  .seriesAccessor(function(d) { return d.key[0]; })
  .keyAccessor(function(d) { return d.key[1]; })
  .x(d3.scaleLinear().domain([1, 8]))
  .legend(dc.legend().horizontal(true).x(80))
  .render();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.4/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.4/dc.css"/>
<div id="graph"></div>

它按预期工作...但是由于我的数据中有 "gaps"，它看起来不太好。有什么方法可以告诉 dc.js 在没有特定系列数据的点上默认为 0？

基本上，我想要这个结果，但不必为每个系列创建不同的组并自己将它们堆叠在一起：

var data = [
  {day: 1, service: 'ABC', count: 100},
  {day: 2, service: 'ABC', count: 80},
  {day: 4, service: 'ABC', count: 10},
  {day: 7, service: 'XYZ', count: 380},
  {day: 8, service: 'XYZ', count: 400}
];
var ndx = crossfilter(data);
var dim = ndx.dimension(function (d) { return d.day; });
var grpABC = dim.group().reduceSum(function(d) { return d.service === 'ABC' ? +d.count : 0; });
var grpXYZ = dim.group().reduceSum(function(d) { return d.service === 'XYZ' ? +d.count : 0; });
var chart = dc.lineChart('#graph')
  .width(620)
  .height(175)
  .dimension(dim)
  .group(grpABC)
  .stack(grpXYZ)
  .renderArea(true)
  .x(d3.scaleLinear().domain([1, 8]))
  .legend(dc.legend().horizontal(true).x(80))
  .render();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.4/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.4/dc.css"/>
<div id="graph"></div>

有什么方法可以实现与第一个示例的 seriesChart 相同的效果吗？

我见过 this question 可能相似，但他们使用的是 NVD3.js 和下划线。我们有 jQuery、d3.js 和 dc.js。

Answer 1

dc.js FAQ contains a section on preprocessing data. In this case, you want to ensure that any empty values are filled with zero, and ensure_group_bins 非常接近您的要求。

在这里，我对其进行了调整，将所需的 bin 作为数组而不是参数，因为我们需要大量的 bin - Cartesian product of all the services and all the days. Handily, D3v4 contains d3.cross 正是为了这个目的。

然后我们用 ensure_group_bins 制作的假组包裹我们的组，我们就开始了！

有趣的是，这暴露了之前被遮盖的有关您的数据的详细信息 - 由于折线图仅在有数据的地方绘制点，因此之前不清楚服务 ABC / 第 3 天是否为零。

function ensure_group_bins(source_group, bins) {
return {
    all:function () {
        var result = source_group.all().slice(0), // copy original results (we mustn't modify them)
            found = {};
        result.forEach(function(d) {
            found[d.key] = true;
        });
        bins.forEach(function(d) {
            if(!found[d])
                result.push({key: d, value: 0});
        });
        return result;
    }
};
};
var needed = d3.cross(['ABC', 'XYZ'], d3.range(1,8));

var data = [
  {day: 1, service: 'ABC', count: 100},
  {day: 2, service: 'ABC', count: 80},
  {day: 4, service: 'ABC', count: 10},
  {day: 7, service: 'XYZ', count: 380},
  {day: 8, service: 'XYZ', count: 400}
];
var ndx = crossfilter(data);
var dim = ndx.dimension(function (d) { return [d.service, d.day]; });
var grp = dim.group().reduceSum(function(d) { return +d.count; });
grp = ensure_group_bins(grp, needed);
var chart = dc.seriesChart('#graph')
  .width(620)
  .height(175)
  .chart(function(c) { return dc.lineChart(c).renderArea(true);})
  .dimension(dim)
  .group(grp)
  .seriesAccessor(function(d) { return d.key[0]; })
  .keyAccessor(function(d) { return d.key[1]; })
  .x(d3.scaleLinear().domain([1, 8]))
  .legend(dc.legend().horizontal(true).x(80))
  .render();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.4/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.4/dc.css"/>
<div id="graph"></div>

如何填补 dc.js 系列图表中的空白？

How can I fill gaps in a dc.js series chart?

charts

d3.js

crossfilter

dc.js