admin管理员组

文章数量:1334826

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?

  • javascript
  • charts
  • nvd3.js
  • angular-nvd3
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 badges
Add a ment  | 

2 Answers 2

Reset to default 5 +100

There 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

本文标签： javascriptAxis labels in NVD3jsStack Overflow

版权声明：本文标题：javascript - Axis labels in NVD3.js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742346168a2457563.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。