dc.js bar chart with ordinal x axis scale doesn't render correctly

3
votes

I've recently discovered dc.js and have been trying to implement a simple bar chart using the bar chart example provided on d3.js's website: http://bl.ocks.org/mbostock/3885304.

However, as part of dc.js implementation, a crossfilter dimension and group is required.

So using a simple TSV file with "letters" and "frequencies", I've changed the code a bit to look as follows:

d3.tsv('testdata.tsv', function(error, data) {
  var cf = crossfilter(data);

  var dimension = cf.dimension(function(d){
    return d.letter;
  }

  var group = dimension.group().reduce(
    function(p,v){ 
      p.frequency += v.frequency
    }, 
    function(p,v){ 
      p.frequency -= v.frequency
    },
    function(){ 
      return { frequency: 0  };
  });

I'm a little confused about what I should be setting the valueAccessor to (on my bar chart), because when I set the valueAccessor to return "frequency", and I set my xAxis scale to ordinal with a domain of all "letters" in the data set, I get a rendered bar graph with almost all x-axis values ("A - Y") at the ZERO point and one x-axis value (i.e. "Z") at the end of the x-axis line.

I've tried setting the ranges, but it doesn't seem to do the trick. Any ideas on what I'm misunderstanding would be greatly appreciated!

1
javascriptd3.jscrossfilter

1 Answers

8
votes

Turns out I had to set the .xUnits property to dc.units.ordinal() in order to get the x-axis spaced out correctly!