d3 + crossfilter:日期轴渲染像素条

时间:2013-06-03 22:58:23

标签: d3.js bar-chart crossfilter dc.js

我花了大部分时间试图获得一个漂亮的日期轴直方图,以至于我在stackoverflow上发布了我的第一个问题。

bars are too thin

轴和堆叠正是我想要的方式,但是对于没有(对我而言)明显的原因,条形图非常薄。换句话说,我真的很感激一些帮助。

这是一个最小化的版本(我正在使用dc.js库,但是我很自信挑战代表d3 + crossfilters):

var jsonstr = [{"timestamp": "2013-06-13T11:04:24.729Z"},{"timestamp": "2013-06-17T11:03:24.729Z"},{"timestamp": "2013-06-17T11:02:24.729Z"},{"timestamp": "2013-06-19T11:02:14.129Z"}];

var ndx = crossfilter(jsonstr);

var timestampD = ndx.dimension(function (d) {
    return new Date(d.timestamp);
});

var timestampDG = timestampD.group(function (d) {
    return d3.time.day(d);
});

var barChart = dc.barChart("#dc-bar");
barChart.width(500)
    .height(250)
    .dimension(timestampD)
    .group(timestampDG)
    .x(d3.time.scale().domain([(new Date(2013,05,12)), (new Date(2013,05,20))]).nice(d3.time.day))
    .xAxis().tickFormat(function (x) {
        return x.getDate() + "/" + (x.getMonth()+1);
    });

dc.renderAll();

2 个答案:

答案 0 :(得分:13)

我认为问题实际上与你如何使用dc.js有关;你没有指定条形图应该是什么units。试试这个:

barChart
    .width(500)
    .height(250)
    .dimension(timestampD)
    .xUnits(d3.time.days)
    .ect

答案 1 :(得分:1)

对于其他有这个问题的人来说,亚当的答案似乎没有做任何事情,请确保你没有像我一样将弹性X设置为真。