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 powerbi
but I'm guessing that this.xAxis
is the g
element which groups all the axis components. A g
doesn't style directly so all the elements underneath are inheriting from it (including the text
elements).
一无所知,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 g
and set the tick marks and line across the axis to be black and thick.
这将为整个轴设置字体,并将轴上g
的刻度线和线设置为黑色和粗线。