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
Change the thickness/width of a d3 chart's axis lines without affecting tick labels
提问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的刻度线和线设置为黑色和粗线。

