3

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

该文档似乎没有表明这样做的选项。可能吗？

4

2 回答 2

5

NVD3 或 D3 本身似乎没有默认属性。

但是，我们可以通过将字体大小或任何其他 SVG CSS 属性直接应用于轴的文本元素来更改它。这可以通过使用<style>tag 或使用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

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

以下是工作代码示例。

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

于 2016-04-14T19:13:31.330 回答
1

我不相信你可以通过 NVD3 Javascript API 做到这一点。NVD3 库在 CSS 中指定轴颜色和字体大小等内容。

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

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

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

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

于 2016-04-14T19:14:32.350 回答