Using an ordinal scale ('d3.scale.ordinal') for the x-axis in a bar chart

Question

I have a data array like this:

var data = [{\"Alphabet_Type\":\"a\"}, {\"Alphabet_Type\":\"b\"}, {\"Alphabet_Type\":\"a\"}];

I am using:

Answer 1

Two things:

1. Pass dc.units.ordinal as the parameter to .xUnits().
2. Pass an ordinal scale function to .x().

Here's what I mean:

.x(d3.scale.ordinal().domain(["", "a", "b", "c"])) // Need empty val to offset first value
.xUnits(dc.units.ordinal) // Tell dc.js that we're using an ordinal x-axis

See this JSFiddle: http://jsfiddle.net/reblace/tbamW/156/

For some reason, I couldn't get renderHorizontalGridLines() or renderVerticalGridLines() to work, but the rest is good.

Answer 2

Adding

.x(d3.scale.ordinal().domain(data.map(function (d) {return d.Alphabet_Type; })))

solved the problem.