Question

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

该文档似乎并未表明执行此操作的选项。有可能吗？

Answer 1

在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 Axis属性的链接。

https://github.com/mbostock/d3/wiki/SVG-Axes

这些不包括有关设置刻度字体大小的任何信息。

以下是工作代码示例。

＆＃13;

<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>

＆＃13;

Answer 2

我不相信您可以通过NVD3 Javascript API执行此操作。 NVD3库在CSS中指定轴颜色和字体大小等内容。

您应该检查nv.d3.css文件，了解它们如何配置不同的CSS属性。

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

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

注意：使用填充来改变颜色，而不是颜色（因为我们正在处理SVG＆＃39; s

NVD3.js中的轴标签

2 个答案: