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

让·杜邦（Jean Dupont）

我正在使用crossfilter和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小时

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

让·杜邦（Jean Dupont）

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"));

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。