d3.js以百万为单位统一格式化轴

Question

我找到了this thread，它让我到了我需要的地方的一半，我想知道是否有人知道如何调整解决方案以满足我的需求。

因此，如果我有成千上万的值，以及数百万的某些值，是否有人知道我如何设置所有的格式以数百万格式？例如，如果我有800k的值，它将显示为0.8百万。

这是我在使用上述解决方案而不进行调整时得到的结果。

Answer 1

在这种情况下，您不需要使用SI前缀。鉴于此域名：

var scale = d3.scaleLinear().domain([200000,1800000])

从20万增加到180万，您只需将刻度值除以1,000,000并添加“百万”字符串。

以下是演示：

var svg = d3.select("body")
	.append("svg")
	.attr("width", 600)
	.attr("height", 100);
	
var scale = d3.scaleLinear().domain([200000,1800000]).range([20,550]);

var axis = d3.axisBottom(scale).tickFormat(function(d){return d/1000000 + " Million"});

var gX = svg.append("g").attr("transform", "translate(20, 50)").call(axis);

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

编辑：根据评论，您只想在最后一个刻度中显示“百万”。因此，我们必须检查tick是否是最后一个并有条件地格式化它：

var axis = d3.axisBottom(scale).tickFormat(function(d){
    if(this.parentNode.nextSibling){
        return d/1000000;
    } else { 
        return d/1000000 + " Million";
    }
});

以下是演示：

var svg = d3.select("body")
	.append("svg")
	.attr("width", 600)
	.attr("height", 100);
	
var scale = d3.scaleLinear().domain([200000,1800000]).range([20,550]);

var axis = d3.axisBottom(scale).tickFormat(function(d){
 if(this.parentNode.nextSibling){
return d/1000000} else { return d/1000000  + " Million"}});

var gX = svg.append("g").attr("transform", "translate(20, 50)").call(axis);

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