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

Question

我有一个折线图，如小提琴http://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"来达到此效果。

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

假组将crossfilter组包装在一个像组一样工作的对象中。因为在大多数情况下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的小提琴：http://jsfiddle.net/gordonwoodhull/dwfgma8j/4/

FWIW我还将dc.renderAll()更改为dc.redrawAll()，以便启用动画转换，而不是每次都从头开始渲染白色和渲染。过渡并不完美，但我认为它仍然比眨眼更好。 我有一个修复，但它是一个突破性的变化，所以它将进入dc.js 2.1。