Javascript NVD3.js中的轴标签

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

---

文档中似乎没有指明这样做的选项。有可能吗？

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

但是，我们可以通过将字体大小或任何其他SVG CSS属性直接应用于axis的文本元素来更改它。这可以通过使用

标记或使用

d3.select（）

来完成

轴文本标签由

节点创建。对于这两个轴，都有具有以下类的父容器元素

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

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

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

这些不包括有关设置记号字体大小的任何信息

下面是工作代码示例

#图表svg{
高度：300px；
}
.nv-x文本{
字体大小：20px；
填充：蓝色；
}
.nv-y文本{
字号：17px；
填充物：红色；
}
变量数据=函数（）{
var sin=[]，
cos=[]；
对于（变量i=0；i<100；i++）{
sin.push（{x:i，y:Math.sin（i/10）}）；
cos.push（{x:i，y:.5*Math.cos（i/10）}）；
}
返回[
{
价值观：罪，
键：“正弦波”，
颜色：“#ff7f0e”
},
{
价值观：cos，
关键词：“余弦波”，
颜色：“#2ca02c”
}
];
};
nv.addGraph（函数（）{
window.chart=nv.models.lineChart（）
.useInteractiveGuideline（真）
;
chart.xAxis
.axisLabel（'时间（毫秒）'
.tickFormat（d3.format（'，r'））
;
图1.yAxis
.Axis标签（“电压（v）”
.tickFormat（d3.format（'.02f'））
;
d3.选择（“#图表svg”）
.datum（数据（））
.transition（）.持续时间（500）
.电话（图表）
;
nv.utils.windowResize（图表更新）；
收益表；
});

我不相信您可以通过NVD3 Javascript API实现这一点。NVD3库指定CSS中的轴颜色和字体大小等内容

您应该检查该文件，了解它们是如何配置不同的CSS属性的

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

为了具体回答您的问题，我相信您可以使用以下CSS来完成您的问题：

.nvd3 .nv-axis.nv-x text {
    font-family: ...;
    font-size: ...;
    fill: ...'
}

注意：使用fill来更改颜色，而不是颜色（因为我们处理的是SVG的