Why does d3 axis class name change axis format?

Why does d3 axis class name change axis format?

Here's a D3? .js? puzzler I ran into over the weekend. I have a y-axis
that is changing format according to the class name that is used when i
set the y axis attribute on a group that I append to the the svg object.
Details that might affect it are as follows:
creating the y axis object:
var y = d3.scale.ordinal()
.domain(d3.range(ydomain.length))
.rangeRoundBands([2, height],0.08);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickValues(ydomain);
Attaching the y axis:
svg.append("g")
.attr("class", "**y-axis**")
.call(yAxis)
.append("text")
.attr("y", -17)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.style("font-size", "16px")
.attr("transform", "translate(5,0), rotate(0)")
.text("Keywords")
;
The bold "y-axis" is the part that triggers the funny behavior. If I name
it as: "y axis", I get this:

BUT if I use "y-axis" as above, the formatting changes to this:

The bolded line appears rather than the axis with small tick marks. Both
versions of class name "y axis","y-axis" seem to be valid, both call the
yAxis object, and this is the first time in the code that these class
names are used. So what's the fundamental cause of this behavior? I think
there's some web dev 101 stuff I'm not getting so simple and basic
explanations are much appreciated.