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