dc.js：将线条和区域延伸到图表末尾

Question

我正在尝试使用 dc.js 绘制面积图，并且图表的结束日期（即最右边）基于当前日期，而不是数据集中的最后日期。在数据点之间存在日期差距的情况下，我希望该区域从一个点延伸到下一个点，不在 0 处绘制。

鉴于此数据：

    var data = [
    {domain: "foo.com", project: "pdp", repo: "myrepo", commit_date: "6/1/2014", lines_added: 100, lines_deleted: 50},
    {domain: "foo.com", project: "pdp", repo: "myrepo", commit_date: "7/1/2014", lines_added: 100, lines_deleted: 50}
        ];
var ndx = crossfilter(data);

图表的线/区域目前在“7/1/2014”数据点结束，但我希望它延伸图表的整个长度。

绘制图表的相关代码为：

var dateDim = ndx.dimension(function(d) {return d.commit_date;});
var minDate = dateDim.bottom(1)[0].commit_date;
var maxDate = new Date();
var domainGroup = dateDim.group().reduceSum(function(d) {return d.cumulative_lines;});

unshippedlineChart
    .width(500).height(200)
    .dimension(dateDim) 
    .group(domainGroup)
    .renderArea(true)
    .x(d3.time.scale().domain([minDate,maxDate]))
    .brushOn(false)
    .interpolate('step-after')
    .yAxisLabel("Unshipped Value");

完整示例位于http://jsfiddle.net/xayhkcvn/1/

Answer 1

您实际上并没有提出问题 :-)，但我认为您可能正在寻找预过滤数据的方法，以便将其扩展到今天，并删除所有零。

这些东西没有内置在 dc.js 中，但有 some example code in the FAQ 可能会有所帮助。具体来说，有一个函数remove_empty_bins 调整一个组以删除任何零。

您可以类似地定义一个函数来添加一个终点（未经测试）：

function duplicate_final_bin(source_group, key) {
    return {
        all:function () {
            var ret = Array.prototype.slice.call(source_group.all()); // copy array
            if(!ret.length) return ret;
            ret.push({key: key, value: ret[ret.length-1].value});
            return ret;
        }
    };
}

您可以使用remove_empty_bins 撰写此内容：

var super_group = duplicate_final_bin(remove_empty_bins(domainGroup), maxDate);

这个想法是创建一个包装器对象，它可以根据需要从（总是变化的）source_group.all() 动态添加或删除内容。 dc.js 将在重绘时调用group.all()，这些包装器会拦截该调用并调整交叉过滤器组返回的数据。