D3.js上下双柱状图开发问题：坐标轴显示控制需求

这个问题很好搞定，核心就是咱们要把水平轴（x轴）和垂直轴（y轴）的样式区分开，别用统一的.axis选择器一刀切啦！

两种可行的解决方案： #

方案1：利用D3轴的默认类名

D3在生成轴的时候，会自动给不同方向的轴容器（<g>元素）加上对应的类：

• 水平轴（比如用d3.axisBottom()创建的x轴）会有class="x axis"
• 垂直轴（比如用d3.axisLeft()/d3.axisRight()创建的y轴）会有class="y axis"

所以咱们不用给所有.axis设置隐藏，只需要针对垂直轴设置隐藏就行：

/* 只隐藏所有垂直y轴 */
.axis.y {
  display: none;
}

这样所有的水平x轴会保持默认显示状态，完美符合你的需求～

方案2：给x轴添加自定义类（更灵活）

如果你的轴类名比较特殊，或者想更明确地控制，也可以在创建x轴的时候手动添加一个自定义类，比如x-axis：

// 创建x轴时添加自定义类
svg.append("g")
  .attr("class", "axis x-axis") // 新增x-axis类
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(xScale));

然后修改CSS，先隐藏所有轴，再单独让自定义类的x轴显示：

/* 先隐藏所有轴 */
.axis {
  display: none;
}
/* 单独让x轴显示 */
.x-axis {
  display: initial;
}

小提示 #

可以打开浏览器的开发者工具（F12），选中轴元素查看它的类名，确保你的CSS选择器能精准选中目标轴，避免选漏或者选错哦！

内容的提问来源于stack exchange，提问作者user6456564