Question

我正在制作一个等值线图。当用户将鼠标悬停在多边形上时，将显示一个简单的折线图，反映该特定多边形中包含的数据。

数据包含很大程度的变化。有时Y轴上的域最大值为400,000,000美元。在这些情况下，我想将图形显示为＆＃34; 400M。＆＃34;太容易了！

但是在某些情况下，特定多边形的数据在我想要显示的情况下可能最大值为100,000美元＆＃34; 100K＆＃34;

在某些情况下，数据的最大价值可能只有100美元....

如何动态更改刻度表格式以反映将遇到的不同域？

Answer 1

在我看来，你需要的只是将刻度设置为使用SI：

.tickFormat(d3.format(".0s"));

这是一个演示：

var svg = d3.select("body").append("svg");

var xScale = d3.scaleLinear()
	.range([10, 280]);
	
var xAxis = d3.axisBottom(xScale.domain([0, 100000000]))
	.tickFormat(d3.format(".2s"));
	
var gX = svg.append("g")
	.attr("transform", "translate(0,30)")
	.call(xAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>

您可以看到此格式如何适用于多个不同的值：

var format = d3.format(".2s");

console.log(format(10000000000))
console.log(format(100000000))
console.log(format(4786))
console.log(format(42))

<script src="https://d3js.org/d3.v4.min.js"></script>

D3动态更改刻度线格式

1 个答案: