NVD3.js中的轴标签
我正在寻找如何修改NVD3.js中X和Y轴标签字体的字体大小和属性
文档似乎并没有指明这样做的选择。有可能吗？
回答 2
Stack Overflow用户
发布于 2016-04-14 19:13:31
在NVD3或D3本身中，似乎没有默认的属性。
但是，我们可以通过直接将字体大小或任何其他SVG属性应用于轴的文本元素来更改它。这可以通过使用<style>标记或使用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中可用的其他属性的链接。
http://nvd3-community.github.io/nvd3/examples/documentation.html
下面是D3中SVG属性的链接。
https://github.com/mbostock/d3/wiki/SVG-Axes
这些不包括任何关于设置刻度字体大小的信息.
下面是工作代码示例。
<html>
<head>
<style>
#chart svg {
height: 300px;
}
.nv-x text{
font-size: 20px;
fill: blue;
}
.nv-y text{
font-size: 17px;
fill:red;
}
</style>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://nvd3.org/assets/css/nv.d3.css">
<script type="text/javascript" src="http://nvd3.org/assets/lib/d3.v2.js"></script>
<script type="text/javascript" src="http://nvd3.org/assets/lib/fisheye.js"></script>
<script type="text/javascript" src="http://nvd3.org/assets/js/nv.d3.js"></script>
</head>
<body>
<div id="chart">
<svg></svg>
</div>
<script>
var data = function() {
var sin = [],
cos = [];
for (var i = 0; i < 100; i++) {
sin.push({x: i, y: Math.sin(i/10)});
cos.push({x: i, y: .5 * Math.cos(i/10)});
}
return [
{
values: sin,
key: 'Sine Wave',
color: '#ff7f0e'
},
{
values: cos,
key: 'Cosine Wave',
color: '#2ca02c'
}
];
};
nv.addGraph(function() {
window.chart = nv.models.lineChart()
.useInteractiveGuideline(true)
;
chart.xAxis
.axisLabel('Time (ms)')
.tickFormat(d3.format(',r'))
;
chart.yAxis
.axisLabel('Voltage (v)')
.tickFormat(d3.format('.02f'))
;
d3.select('#chart svg')
.datum(data())
.transition().duration(500)
.call(chart)
;
nv.utils.windowResize(chart.update);
return chart;
});
</script>
</body>
</html>
Stack Overflow用户
发布于 2016-04-14 19:14:32
我不相信您可以通过NVD3 Javascript来做到这一点。NVD3库指定了CSS中的轴颜色和字体大小。
您应该检查nv.d3.css文件，了解它们如何配置不同的CSS属性。
为了具体回答您的问题，我相信您可以使用下面的CSS来完成您的要求：
.nvd3 .nv-axis.nv-x text {
font-family: ...;
font-size: ...;
fill: ...'
}注意:使用fill更改颜色，而不是颜色(因为我们正在处理SVG的
https://stackoverflow.com/questions/36507857
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号