更改 Billboard.js / D3.js 中的默认图表轴粗细

Question

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

我的图表是这样的：

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

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

水平轴是：

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

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

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

<path class="domain" d="M0,2V0H898V2"></path>，应该会显瘦很多。有没有办法在 css/less 文件中进行此更改？

Answer 1

很简单。只需为轴设置 css 规则。为 .bb-axis 设置规则并设置 stroke-width 属性您想要的值。

查看下面的示例。

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 中的默认图表轴粗细

Changing default chart axis thickness in Billboard.js / D3.js

javascript

css

less

d3.js