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

【问题标题】：dc.js x-axis default domain - strange resultsdc.js x 轴默认域 - 奇怪的结果
【发布时间】：2014-02-07 20:30:47
【问题描述】：

我在设法制作一个简单的条形图时注意到奇怪的行为，其中 X 轴为日期，Y 为整数。Bar 生成正确，但 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 个月的图表。问题的根源在哪里？

另外，我添加了调试渲染器来检查渲染后的细节，我看到了奇怪的结果：

/* 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?
});
/**/

【问题讨论】：

当然，我检查了 d3.js 手册以及 dc，但是当我尝试将它们与调试值进行比较时，这些解释让我感到困惑：scale.range: If values指定，将比例的输出范围设置为指定的值数组。数组必须包含两个或多个值，以匹配输入域的基数。给定数组中的元素不必是数字； 我的数据中没有 [0;100] 之类的东西。 scale.domain：返回 scale 的当前输入域。 [0;63286] 来自哪里？为什么不[Date("2014-01-07"), Date("2014-02-07")]？
我想我可以帮助你，如果你能把这个问题的具体例子放在一起。如果可能，请尝试通过删除任何不会直接影响您的结果的代码，在 jsfiddle 上重现您的问题的最简单形式。

标签： javascript d3.js crossfilter dc.js

【解决方案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

【讨论】：