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>

它可以按预期工作...但是由于我的数据中存在“空白”，因此看起来不太好。有没有办法告诉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和Underscore。我们有jQuery，d3.js和dc.js。

Answer 1

dc.js FAQ包含a section on preprocessing data。在这种情况下，您要确保所有空值都用零填充，并且ensure_group_bins与所需值非常接近。

在这里，我对其进行了调整，以将所需的bin作为数组而不是参数，因为我们需要大量的bin-所有服务和所有时间的Cartesian product。出于这个目的，D3v4方便地包含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系列图表中的空白？

1 个答案: