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

我正在处理Power Bi d3图表，并且试图更改图表轴线的粗细/宽度。下面的代码更改了行的宽度，但也影响了刻度线的标签，从而极大地改变了字体。

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

我不想影响刻度线的标签。如何只更改轴线？

最佳答案

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

关于d3.js - 更改d3图表的轴线的粗细/宽度，而不影响刻度线标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41536903/