在不影响刻度标签的情况下更改 d3 图表轴线的 thickness/width

Question

我正在处理 Power Bi d3 图表，我正在尝试更改图表轴线的 thickness/width。下面的代码改变了线条的宽度，但也影响了刻度的标签，彻底改变了字体。

this.xAxis
   .style({ 'stroke': 'black', 'fill': 'none', 'stroke-width': '1px'}) 
   .call(xAxis);

我不想影响刻度线的标签。我怎样才能只改变轴线？

Answer 1

对 powerbi 一无所知，但我猜测 this.xAxis 是 g 元素，它将所有轴组件组合在一起。 g 不直接设置样式，因此下面的所有元素都继承自它（包括 text 元素）。

所以，这里的答案是让您的风格更加具体。您可以使用

this.xAxis.select('path')
  .style({ 'stroke': 'black', 'fill': 'none', 'stroke-width': '1px'});

它的样式只是轴的水平线。或者：

this.xAxis.selectAll('line')
  .style({ 'stroke': 'black', 'fill': 'none', 'stroke-width': '1px'});

这将设置刻度线的样式。

顺便说一句，我根本不会这样设计，可能会通过传统的方式来做 CSS:

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
  stroke-width: 10px;
}

这将设置整个轴的字体 g 并将轴上的刻度线和线设置为黑色和粗。

Change the thickness/width of a d3 chart's axis lines without affecting tick labels