dc.js 每个点后从零开始的折线图

Question

我有一个折线图，如图fiddlehttp://jsfiddle.net/djmartin_umich/qBr7y/

该图工作正常并按预期绘制。但我需要做一个改变，让地块变成三角形，我可以看到一系列不规则的三角形。我的意思是在 Y 的每个点之后，它应该下降到 0 并重新开始。我知道我们可以通过显式添加指向 0 的数据点来实现这一点。但是，我想知道我们是否可以在不创建额外数据点的情况下做到这一点。

HTML:

<div id="line-chart"></div>
<div id="log">Incoming Data:</div>

JS:

var startDate = new Date("2011-11-14T16:17:54Z");
var currDate = moment(startDate);
var cf = crossfilter([{date: startDate, quantity: 1}]);
AddData();

var timeDimension = cf.dimension(function(d){ return d.date; });
var totalGroup = timeDimension.group().reduceSum(function(d){ return d.quantity; });

var lineChart = dc.lineChart("#line-chart")
    .brushOn(false)
    .width(800)
    .height(200)
    .elasticY(true)
    .x(d3.time.scale().domain([startDate, currDate]))
    .dimension(timeDimension)
    .group(totalGroup);

dc.renderAll();

window.setInterval(function(){
  AddData();
  lineChart.x(d3.time.scale().domain([startDate, currDate]));
  dc.renderAll();
}, 800);

function AddData(){
    var q = Math.floor(Math.random() * 6) + 1;
    currDate = currDate.add('day', 5);
    cf.add( [{date: currDate.clone().toDate(), quantity: q}]);  
    $("#log").append(q + ", ");
}

CSS:

#log{
    clear:both;
}

谢谢，

维琪

Answer 1

您可以使用 "fake group" 来实现此效果。

这是一种用于预处理数据的通用技术，允许您在不修改交叉过滤器中的数据的情况下更改图表显示的内容。在这种情况下，我们希望在交叉过滤器组返回的每个点之后立即添加一个数据点。

假组将交叉过滤器组包装在一个像组一样工作的对象中。因为在大多数情况下 dc.js 只需要调用 group.all()，这很简单：

function drop_to_zero_group(key_incrementor, group) {
    return {
        all: function() {
            var _all = group.all(), result = [];
            _all.forEach(function(kv) {
                result.push(kv);
                result.push({key: key_incrementor(kv.key), value: 0});
            })
            return result;
        }
    }
}

此处的假组为它读取的每个数据点生成两个数据点。第一个只是原始文件的副本（或引用），第二个文件的密钥由用户指定的函数递增。

用零值参数化这个函数也可能有意义，但我主要想取出日期增量器，因为这涉及另一个技巧。这是一个日期增量器：

function increment_date(date) {
    return new Date(date.getTime()+1);
}

这使用 date.getTime() 获取整数值（在 milliseconds since the beginning of 1970 中），加一，然后转换回日期。

实际上，我第一次尝试这个时，忘记包含 +1，但它仍然有效！但我不建议这样做，因为如果有多个点具有相同的 x 值，dc.js 可能会混淆。

通过在将组传递到图表之前包装组来应用假组

lineChart
  .group(drop_to_zero_group(increment_date, totalGroup));

这是 DJ fiddle 的叉子：http://jsfiddle.net/gordonwoodhull/dwfgma8j/4/

FWIW 我还将 dc.renderAll() 更改为 dc.redrawAll() 以启用动画过渡，而不是每次都闪烁白色并从头开始渲染。过渡并不完美，但我认为它仍然比眨眼好。 我有一个修复程序，但这是一个重大更改，因此它将进入 dc.js 2.1.

dc.js 每个点后从零开始的折线图

dc.js line chart starting from zero after each point

javascript

dc.js