Question

使用d3创建基本轴时，似乎d3在选择要显示的刻度和值方面做得很好。当我有一个具有丑陋值的域（例如4.4而不是0）时，它将不会按预期显示外部刻度的任何文本。

我的问题是，如何为外部刻度添加一些自定义文本？（或者可能在轴的左右两侧，不一定在下面）

var scale = d3.scaleLinear().domain([4.4, 989.4]).range([0, 600]);

var axis = d3.axisBottom().scale(scale);

d3.select('.axis')
	.call(axis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
	<svg width="650" height="40">
		<g class="axis" transform="translate(20, 0)" />
	</svg>

Answer 1

您可以使用.nice方法强制d3显示外部刻度。摘自文档：

扩展域，使其以良好的圆值开始和结束。此方法通常会修改比例的域，并且可能只会扩展最接近的圆值的界限。

var scale = d3.scaleLinear().domain([4.4, 989.4]).range([0, 600]).nice();

var axis = d3.axisBottom().scale(scale);

d3.select('.axis')
	.call(axis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
	<svg width="650" height="40">
		<g class="axis" transform="translate(20, 0)" />
	</svg>

您也可以通过这种方式为您的轴设置tickValues（在这种情况下，不会修改比例域）：

var scale = d3.scaleLinear().domain([4.4, 989.4]).range([0, 600]);

var tickValues= [].concat(scale.domain()[0], scale.ticks(), scale.domain()[1]);

var axis = d3.axisBottom().scale(scale).tickValues(tickValues);

d3.select('.axis')
	.call(axis);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
	<svg width="650" height="40">
		<g class="axis" transform="translate(20, 0)" />
	</svg>

将文本添加到D3轴的外部刻度

1 个答案: