我正在寻找如何在NVD3.js中修改X轴和Y轴标签字体的字体大小和属性
文档似乎没有指明执行此操作的选项。可能吗？
最佳答案
NVD3 或 D3 本身似乎没有默认属性。
然而，我们可以通过直接将其应用于轴的文本元素来更改字体大小或任何其他 SVG CSS 属性。这可以通过使用 <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>关于javascript - NVD3.js 中的轴标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36507857/