在Billboard.js/D3.js中更改默认图表轴粗细 [英] Changing default chart axis thickness in Billboard.js / D3.js
问题描述
我已经使用 Billboard.js (基于D3 v4 +的界面图表库)创建了一个图表. 我遇到的问题是默认情况下将轴的厚度设置得很粗，我找不到任何使它们更薄的方法.
I've created a chart with Billboard.js (an interface chart library based on D3 v4+). The problem I have is with the thickness of the axis which are made by default pretty thick, I couldn't find any method to make them slimmer.
这是我的图表的样子:
当我右键单击它们并在inspect中打开时，我设法更改了它们的厚度，垂直轴的元素为:
I managed to change their thickness when I right-clicked on them and opened in inspect, the element for the vertical axis is:
<path class="domain" d="M-6,1H0V446H-6"></path>
，水平轴为:
<path class="domain" d="M0,6V0H898V6"></path>
我发现，如果在检查模式下将6更改为2，则如下:
I discovered that if I change the 6s with 2s in inspect mode to be like:
<path class="domain" d="M-2,1H0V446H-2"></path>和
<path class="domain" d="M0,2V0H898V2"></path>，它将看起来更苗条.有没有办法在css/less文件中进行此更改?
<path class="domain" d="M0,2V0H898V2"></path>, it will look much slimmer as it should be. Is there a way to make this change in the css/less file?
推荐答案
非常简单.只需为轴设置css规则.
设置.bb-axis的规则并设置所需的stroke-width属性值.
Is quite easy. Just set css rule for axis.
set rule for .bb-axis and set stroke-width property value you want.
查看下面的示例.
bb.generate({
"data": {
"columns": [
["data1", 30, 200, 100, 400, 150]
],
}
});
/* set for y axis */
.bb-axis.bb-axis-y path {
stroke-width: 3px;
}
/* set for all the axes.
.bb-axis {
stroke-width: 3px;
}
*/
<!doctype html>
<html>
<head>
<script src="//cdn.jsdelivr.net/npm/billboard.js@1.1.1/dist/billboard.pkgd.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/billboard.js@1.1.1/dist/billboard.css">
</head>
<body>
<div id="chart"></div>
</body>
</html>
这篇关于在Billboard.js/D3.js中更改默认图表轴粗细的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
