Crossfilter.js 和 dc.js 条形图问题

Question

我正在与 crossfilter and dc.js 合作，我想做这样的事情：

因此，在创建维度和组之后：

var Time1 = ndx.dimension(function(d) { return d.Dep_Time1; }); var FlightsByTime1 = Time1.group();

我试过像这样画条形图:

var Time1Chart = dc.barChart("#Time1-chart");

这是它的定义：

Time1Chart

        .height(160)
        .transitionDuration(1000)
        .dimension(Time1)
        .group(FlightsByTime1)
        .brushOn(true)
        .margins({top: 10, right: 50, bottom: 30, left: 50})
        .centerBar(false)
        .gap(1)
        .elasticY(true)
        .x(d3.scale.ordinal().domain(Time1))                          
        .xUnits(dc.units.ordinal)
        .renderHorizontalGridLines(true)
        .renderVerticalGridLines(true)
        .ordering(function(d){return d.value;})
        .yAxis().tickFormat(d3.format("f"));

我得到了这个结果：

问题：

. 如您所见，在轴值中我有很多数据...:s

. 我没有画笔，尽管有 brushOn(true)

. 我想像示例中那样分割轴，2 小时乘 2 小时

请问谁能帮我实现以上目标？

Answer 1

1. 首先我们应该创建交叉过滤器实例。

var ndx = crossfilter(dataSet);

2.然后我们应该创建维度。

var Time1 = ndx.dimension(function(d) { return d.Dep_Time1.getHours() + d.Dep_Time1.getMinutes() / 60; });

3.那么我们应该对结果进行分组。

var FlightsByTime1 = Time1.group(Math.floor);

4.然后我们创建图表。

Time1Chart = dc.barChart("#Time1-chart");

5. 最后给出图表的定义

Time1Chart

        .height(133)
        .transitionDuration(1000)
        .dimension(Time1)
        .group(FlightsByTime1)
        .brushOn(true)
        .margins({top: 10, right: 50, bottom: 30, left: 50})
        .centerBar(false)
        .gap(1)
        .elasticY(true)
        .x(d3.scale.linear() 
        .domain([0, 24]) 
        .rangeRound([0, 10 * 24]))                      
        .renderHorizontalGridLines(true)
        .renderVerticalGridLines(true)
        .ordering(function(d){return d.value;})
        .yAxis().tickFormat(d3.format("f"));

Crossfilter.js 和 dc.js 条形图问题

Crossfilter.js and dc.js barchart issues

javascript

crossfilter

dc.js