为什么 d3 轴类名称会更改轴格式？

Question

这是 D3？ .js？我在周末遇到的谜题。我有一个 y 轴，它根据我在附加到 svg 对象的组上设置 y 轴属性时使用的类名更改格式。可能影响它的细节如下：

1. 创建 y 轴对象：

   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. 附加y轴：

   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")
   

   ;

粗体“y 轴”是触发有趣行为的部分。如果我将其命名为：“y 轴”，我会得到：

但是如果我使用上面的“y轴”，格式会变成这样：

出现的是粗线而不是带有小刻度线的轴。两个版本的类名“y轴”、“y轴”似乎都是有效的，都调用了yAxis对象，这是代码中第一次使用这些类名。那么这种行为的根本原因是什么？我认为有一些 web dev 101 的东西我没有那么简单，非常感谢基本的解释。

Answer 1

“y 轴”是一个具有相关样式的类，它为您提供带有刻度线的细线。 “y 轴”没有这样的样式，并且正在根据其他一些不适用于轴样式的样式属性绘制您的 y 轴线。