Crossfilter.js und dc.js barchart Fragen

Question

Ich bin mit crossfilter und dc.js arbeiten und ich möchte so etwas machen:

So, nachdem die Dimension und die Gruppe zu erstellen:

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

ich versuchte, ein Balkendiagramm wie diese zu zeichnen:

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

Hier ist die Definiton:

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

Und ich dieses Ergebnis:

Die Probleme:

. Wie Sie sehen können, habe ich in Achsenwerten viele Daten ...: s

. Ich habe keine Bürste, trotz brushOn (true)

. Ich möchte die Achse wie im Beispiel 2 Stunden mal 2 Stunden segmentieren

Bitte wer kann mir helfen, das oben genannte zu erreichen?

Answer 1

1. Zuerst sollten wir die Crossfilter-Instanz erstellen.

var ndx = crossfilter(dataSet); 

2. Dann sollten wir die Dimension erstellen.

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

3. Dann Gruppe sollten wir das Ergebnis.

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

4. Dann schaffen wir das Diagramm.

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

5. Schließlich geben die Definiton des Diagramms

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