Question

我正在与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

。我没有刷子，尽管有刷子（真）

。我想像示例一样分段轴，2小时2小时

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

Answer 1

1。首先我们应该创建crossfilter实例。

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条形图问题

1 个答案: