Customizing X-Axis With Ordinal Graphs in D3

Within D3.js, you can customize axises fairly effortlessly by using the SVG Axis methods. I found them to be ineffective when trying to format the X axis for a stacked bar graph, however. I later realized it was because the SVG Axis library will not target ordinal scales, but only linear scales.

While scouring Stack Overflow, Google Groups, and whatever my search queries would produce, I found nothing but custom work-arounds. So Matt Stockton and I had to come up with our own. We went with targetting the .text() method of an SVG element. By accessing the data (d) and loop iteration (i), we could write a heuristic that customizes frequency and format similar to SVG Axis.

Often times a heuristic like that is an excellent work around.