Creating a Text Labeled x-Axis with an Ordinal Scale in D3.js

Question

I\'m building a bar chart in d3.js with an ordinal x-axis whose ticks should label the chart with text. Could anyone explain how the ordinal scale \"maps\" x ticks to the co

Answer 1

You can set the tick values of an ordinal axis explicitly using d3.svg.axis().tickValues(*array*).

But this is an odd way to do it because it dangerously separates your keys and values, meaning you have to take care to manually align the scales and make sure that your data corresponds correctly. It helps to group the keys and values in a single object and then use the format:

       axis.domain(array.map(function (d) { return d.value; }))

to map your axis domains.

I have reworked your data and fiddle to do it in what I see as the more d3 way. (Also note that I made some other changes just for fun, namely improved the margins and cleaned up the axis alignment, etc.)