更改Billboard.js / D3.js中的默认图表轴厚度

时间：2017-10-12 08:38:48

标签： javascript css d3.js less

我使用 Billboard.js （基于D3 v4 +的界面图表库）创建了一个图表。 我遇到的问题是轴的厚度默认很厚，我找不到任何方法让它们更纤细。

这就是我的图表的样子：

enter image description here

当我右键单击它们并在检查中打开时，我设法改变了它们的厚度，垂直轴的元素是：

<path class="domain" d="M-6,1H0V446H-6"></path>

，横轴是：

<path class="domain" d="M0,6V0H898V6"></path>

我发现如果我在检查模式下将6与2更改为：

<path class="domain" d="M-2,1H0V446H-2"></path>和

<path class="domain" d="M0,2V0H898V2"></path>，它应该看起来更加苗条。有没有办法在css / less文件中进行此更改？

1 个答案:

答案 0 :(得分：0)

很容易。只需为轴设置css规则。 设置.bb-axis的规则并设置所需的stroke-width属性值。

查看以下示例。

＆＃13;
＆＃13; 
bb.generate({
	"data": {
		"columns": [
			["data1", 30, 200, 100, 400, 150]
		],
	}
});
＆＃13; 
/* set for y axis */
.bb-axis.bb-axis-y path {
	stroke-width: 3px;
}

/* set for all the axes.
.bb-axis {
  stroke-width: 3px;
}
*/
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题