NVD3.js 中的轴标签

Question

我正在寻找如何修改 NVD3.js 中 X 轴和 Y 轴标签字体的字体大小和属性

该文档似乎没有指出执行此操作的选项。是否可以？

Answer 1

NVD3 或 D3 本身似乎没有默认属性。

但是，我们可以通过直接将其应用于轴的文本元素来更改字体大小或任何其他 SVG CSS 属性。这可以通过使用<style>tag 或使用d3.select().

轴文本标签由节点创建<text>。对于两个轴，都有具有以下类的父容器元素。

nv-x //for x axis <text> nodes
nv-y //for y axis <text> nodes

因此可以很容易地使用它们来设置文本标签的 CSS 属性。

.nv-x text{
  font-size: 20px;
  fill: blue;
}
.nv-y text{
  font-size: 17px;
  fill:red;
}

以下是 NVD3 中可用的其他属性的链接。

下面是 D3 中 SVG 轴属性的链接。

这些不包括有关设置刻度字体大小的任何信息。

以下是工作代码示例。

nv-x //for x axis <text> nodes
nv-y //for y axis <text> nodes