更改d3图表轴线的粗细/宽度而不影响刻度标签

Question

我正在研究Power Bi d3图表,我正在尝试更改图表轴线的粗细/宽度.以下代码更改了行的宽度,但也影响了tick的标签,彻底改变了字体.

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

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

Answer 1

什么都不知道,powerbi但我猜这this.xAxis是将g所有轴组件分组的元素.A 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,并将刻度线和轴上的线设置为黑色和粗.