Why does d3 axis class name change axis format?

Question

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:

1. 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);
   

2. 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.

Answer 1

"y axis" is a class with associated styling that gives you the thin line with the tickmarks. "y-axis" has no such styling and is drawing your y-axis line according to some other styling property not intended for axis styling.