I'm looking for how to modify the font size and attributes of the X and Y axis label fonts in NVD3.js
The documentation doesn't seem to indicate an option for doing this. Is it possible?
I'm looking for how to modify the font size and attributes of the X and Y axis label fonts in NVD3.js
The documentation doesn't seem to indicate an option for doing this. Is it possible?
Share Improve this question edited Apr 13, 2016 at 15:55 DJClayworth asked Apr 8, 2016 at 19:31 DJClayworthDJClayworth 26.9k9 gold badges58 silver badges81 bronze badges2 Answers
Reset to default 5 +100There doesn't seem to be a default property for this in NVD3 or D3 itself.
However we can change font size or any other SVG CSS property by directly applying it to the text element of the axis. This can be done either by using <style> tag or by using d3.select().
Axis text labels are created by <text> nodes. For both the axis there are parent container elements which have following classes.
nv-x //for x axis <text> nodes
nv-y //for y axis <text> nodes
So it's easy to use them to set the text label CSS properties.
.nv-x text{
font-size: 20px;
fill: blue;
}
.nv-y text{
font-size: 17px;
fill:red;
}
Following is the link for other attributes which are available in NVD3.
http://nvd3-munity.github.io/nvd3/examples/documentation.html
And below is the link for the SVG Axis properties in D3.
https://github./mbostock/d3/wiki/SVG-Axes
These do not include any information regarding setting font-size of ticks.
Following is working code sample.
<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/assets/css/nv.d3.css">
<script type="text/javascript" src="http://nvd3/assets/lib/d3.v2.js"></script>
<script type="text/javascript" src="http://nvd3/assets/lib/fisheye.js"></script>
<script type="text/javascript" src="http://nvd3/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>I don't believe that you can do this via the NVD3 Javascript API. The NVD3 library specifies things like axis color and font size in CSS.
You should examine the nv.d3.css file get an idea of how they are configuring different CSS properties.
To answer your question specifically, I believe you could play around with the following CSS to acplish what you are asking:
.nvd3 .nv-axis.nv-x text {
font-family: ...;
font-size: ...;
fill: ...'
}
Note: use fill to change color, not color (since we are dealing with SVG's
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742346168a4426585.html
评论列表（0条）