D3.js图表出现多余竖轴边框？如何保留单条红色竖线？

问题原因 #

D3的axisRight()会自动生成三类元素：

• <path class="domain">：轴线的主竖线（你需要的单条红色线）
• <line class="tick">：每个刻度对应的横向线条（因你设置了tickSize(-width)，这些线条会贯穿整个图表宽度）
• <text class="tick">：刻度文本

你看到的多条红色竖线，是因为CSS样式同时将主轴线（path）和所有刻度线（line）都设置为红色，若刻度线的视觉呈现被误判为竖线，或是scale范围导致部分元素重叠，就会出现多条红线的情况。

解决方法 #

只需保留主轴线为红色，隐藏或修改刻度线样式即可，以下提供两种实现方式：

方式1：通过CSS控制样式

修改你的CSS代码，只让主轴线显示红色，刻度线可隐藏或设为白色：

/* 主轴线设为红色 */
.axis-right path {
  stroke: red;
}
/* 隐藏刻度线（若不需要刻度线） */
.axis-right line {
  display: none;
}
/* 或把刻度线设为白色（若需要白色刻度线） */
/* .axis-right line {
  stroke: white;
} */
/* 刻度文本设为白色 */
.axis-right text {
  fill: white;
}

方式2：通过D3代码直接设置样式

在调用轴组件后，通过选择器精准设置各元素样式：

svg
  .append('g')
  .attr('transform', 'translate(' + width + ', 0)')
  .attr('class', 'axis-right')
  .call(
    d3
      .axisRight()
      .scale(scaleYreverse)
      .ticks(10)
      .tickFormat((x) => `${x}шт`)
      .tickSize(-width)
      .tickPadding(5)
  )
  // 设置刻度文本为白色（用fill而非stroke，文本填充更合理）
  .selectAll('text')
  .style('fill', 'white')
  .style('stroke', 'none')
  // 返回轴组元素，设置主轴线为红色
  .select(function() { return this.parentNode; })
  .selectAll('.domain')
  .style('stroke', 'red')
  // 返回轴组元素，隐藏刻度线
  .select(function() { return this.parentNode; })
  .selectAll('.tick line')
  .style('display', 'none');

补充说明 #

你原本代码中用.style('stroke', 'orange')设置文本样式，这会给文本添加橙色描边，若要让文本显示纯白色，建议用fill属性来设置文本颜色，更符合SVG文本的渲染逻辑。

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