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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/41536903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 04:08:56  来源:igfitidea点击:

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

d3.jstypescriptpowerbi

提问by Marc Pincince

I'm working on a Power Bi d3 chart and I'm trying to change the thickness/width of the chart's axis lines. This following code changes the width of the line but also affects the tick's labels, drastically altering the font.

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

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

I want to NOT impact the tick's labels. How can I only change the axis lines?

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

回答by Mark

Don't know anything about powerbibut I'm guessing that this.xAxisis the gelement which groups all the axis components. A gdoesn't style directly so all the elements underneath are inheriting from it (including the textelements).

一无所知,powerbi但我猜这this.xAxis是将g所有轴组件分组的元素。Ag不直接设置样式,因此下面的所有元素都继承自它(包括text元素)。

So, the answer here is to get more specific with your style. You can do this with

所以,这里的答案是让你的风格更具体。你可以这样做

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

Which would style justthe horizontal line of the axis. Or:

这将只是轴的水平线的样式。或者:

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

Which would style the tick marks.

这将设置刻度线的样式。

As an aside, I wouldn't style like this at all and would probably do it through conventional CSS:

顺便说一句,我根本不会这样设计,可能会通过传统的 CSS 来实现:

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

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

This would set the font for the entire axis gand set the tick marks and line across the axis to be black and thick.

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