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

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 显示外部刻度方法。文档摘录:

Extends the domain so that it starts and ends on nice round values. This method typically modifies the scale’s domain, and may only extend the bounds to the nearest round value.

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>