首页 文章

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

提问于
浏览 次
0

我正在使用crossfilter和dc.js，我想做这样的事情：

enter image description here

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

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

我得到了这个结果：

enter image description here

The problems :

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

. 我没有刷子，尽管brushOn（true）

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

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

javascript dc.js crossfilter

1 回答

  • 0

    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"));
    回复于

相关问题