在dc.js中，为什么elasticX不能正常用于时间序列图表

Question

这是 jfiddle - http://jsfiddle.net/inasisi/6v639g9g/1/

如您所见，X 轴未正确缩放。我可以计算最小和最大日期并正确设置比例但不想在每个过滤器之后都这样做。如果 elasticX 正常工作，我会更喜欢。

有什么想法吗？

var chartGroup = "chartGroup";

data = [{
    "run_date": "2013-01-20",
    "current_grade": "Kindergarten",
    "students": 1
}, {
    "run_date": "2013-01-20",
    "current_grade": "First",
    "students": 2
}, {
    "run_date": "2014-03-22",
    "current_grade": "Kindergarten",
    "students": 3
}, {
    "run_date": "2014-03-22",
    "current_grade": "First",
    "students": 4
}, {
    "run_date": "2015-10-06",
    "current_grade": "Kindergarten",
    "students": 5
}, {
    "run_date": "2015-10-06",
    "current_grade": "First",
    "students": 21
}, {
    "run_date": "2015-02-13",
    "current_grade": "Kindergarten",
    "students": 31
}, {
    "run_date": "2015-02-13",
    "current_grade": "First",
    "students": 26
}, ];

var ndx = crossfilter(data);
var dateFormat = d3.time.format("%Y-%m-%d");
data.forEach(function (d) {
    d.run_date = Date.parse(d.run_date);
});

var ndx = crossfilter(data);

filterDateDimension = ndx.dimension(function (d) {
    return [d.run_date];
});

dateDimension = ndx.dimension(function (d) {
    return [d.run_date];
});

var minDate = dateDimension.bottom(1)[0].run_date;
var maxDate = dateDimension.top(1)[0].run_date;

var runsStudentsGroup = dateDimension.group().reduceSum(function (fact) {
    return fact.students;
});

var totalStudentsChart = dc.lineChart("#students_chart", chartGroup);

totalStudentsChart.renderArea(true)
    .width(300)
    .height(300)
    .x(d3.time.scale())
    .elasticY(true)
    .elasticX(true)
    .renderHorizontalGridLines(true)
    .renderVerticalGridLines(true)
    .dimension(dateDimension)
//.colors('red')
.group(runsStudentsGroup);

dc.renderAll(chartGroup);

$('.day_filter').on('click', function () {
    console.log(dateDimension.top(Infinity));
    console.log($(this).val());

    dateDimension.filter(function (d) {
        console.log(d > new Date(2015, 0, 1));
        return d > new Date(2015, 0, 1);
    });

    console.log(dateDimension.top(Infinity));
    dc.redrawAll();
});

Answer 1

我必须修复一些问题才能显示图表并使过滤器正常工作。我只引用那些而不做解释，因为这些不是问题所在：

d.run_date = new Date(d.run_date);
//...
return d.run_date; // twice
//...
filterDateDimension.filter(function (d) {
//...
dc.redrawAll(chartGroup);

为了回答您经常被问到的主要问题，crossfilter 不会自动删除空垃圾箱。您可以使用 "fake group" 将它们过滤掉。

添加：

function remove_empty_bins(source_group) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return d.value != 0;
            });
        }
    };
}
//...
.group(remove_empty_bins(runsStudentsGroup));

你的 fiddle 的工作分支在这里：http://jsfiddle.net/gordonwoodhull/8an2n1eL/5/

（本例中的过渡特别曲折，will be fixed in 2.1。）

在dc.js中，为什么elasticX不能正常用于时间序列图表

In dc.js, why is elasticX not working properly for Time Series Chart

dc.js