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);

图表的行/区域目前在＆＃34; 7/1/2014＆＃34;数据点，但我希望它能够拉伸图表的整个长度。

绘制图表的相关代码是：

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()，这些包装器会拦截该调用并调整crossfilter组返回的数据。

dc.js：将行和区域扩展到图表的结尾

1 个答案: