javascript - dc.js x 轴默认域 - 奇怪的结果

Question

我在设法制作一个简单的条形图时发现了奇怪的行为，其中 X 轴为日期，Y 为整数。条形图生成正确，但 X 轴看起来很奇怪:我没有设置维度，我确定我只有上个月(1 月 7 日到现在)的值，但 X 轴被缩放以适合 2013 年 6 月到现在的值。

因此，我在图形和上个月的数据上有 7 个月的空白。

任何人都可以建议，这些边界是从哪里来的？ 我知道我的代码中可能有一个错误，但我没有在 dc 的手册中找到任何合适的信息，也不知道在哪里可以找到它。

这是我使用条形图的方式:

为我的数据创建交叉过滤器:filter = crossfilter(json);

为绘图数据创建维度:

var dimension = filter.dimension(function(d){
    var result = new Date(d.last_connected);

    /* debug code to ensure I have no date older than last month */
    if (!('last-date-min' in document))
        document['last-date-min'] = result;
    else if (result < document['last-date-min'])
        document['last-date-min'] = result;
    /* debug code end */

    return result;
});

维度已创建，我通过调试器确保最早的日期是“2014 年 1 月 7 日”。创建组并在分组期间检查最新日期:

var group = dimension.group(function(d){
    var result = d3.time['day'].utc(d);

    /* debug code */
    if (!('late-date-dim-min' in document) )
        document['last-date-dim-min'] = result;
    else if (document['last-date-dim-min'] > result)
        document['last-date-dim-min'] = result;
    /* debug code end */

    return result;
});

创建组后，创建图表并初始化 X 和 Y 轴:

c = bar_chart('last-day-chart', dimension, group);
c.x(d3.time.scale.utc());
c.xAxis().tickFormat(date_formatter);
c.xAxisPadding(1);
c.yAxis().tickFormat(formatter);
c.filterPrinter(date_filter_printer);

就是这样:现在我有一个数据集，我确定该数据集没有早于一个月的日期，但我仍然得到 7 个月的图表。问题的原因在哪里？

此外，我添加了调试 renderlet 以在渲染后检查细节，但我看到了奇怪的结果:

/* debug code */
c.renderlet( function(chart){
    debugger;
    var scale_x = c.x();
    var scale_range = scale_x.range();           // is [0;100] - why? What is this range?
    var min = document['last-date-min'];         // ok, Jan 2014
    var dim_min = document['last-date-dim-min']; // ok
    var scale_domain = scale_x.domain();         // is [0;63286] - why? What is 63286?
});
/**/

Answer 1

这可能与您解析日期的方式有关。我怀疑您的代码正在颠倒月份和日期。

尝试这样的事情:

var dateFormat = d3.time.format("%Y-%d-%m");
records.forEach(function(d) {
    d.date = dateFormat.parse(d.date);
});

这是一个使用日期格式化程序的示例:http://jsfiddle.net/djmartin_umich/HAY2V/

以下是有关此方法的更多信息:https://github.com/mbostock/d3/wiki/Time-Formatting