d3.js - 在不影响刻度标签的情况下更改 d3 图表轴线的粗细/宽度

Question

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

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 设置字体，并将轴上的刻度线和线设置为黑色和粗。