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

Posted 2023-04-14

【中文标题】d3.js 格式轴统一以百万为单位

【英文标题】：d3.js format axis uniformly in millions

【发布时间】：2016-10-11 16:06:57

【问题描述】：

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

因此，如果我有一些以千为单位的值，以及一些以百万计的值，有谁知道我如何将所有刻度设置为以百万为单位的格式？例如，如果我有一个 800k 的值，它会显示为 80 万。

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

【参考方案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>

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

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>

【讨论】：

有没有办法在不调整域和范围的情况下做到这一点？我需要它为图表设置某种响应方式

域名无关紧要，只是sn-p中的一个例子。不管是多少，如果你将它除以 1000000 并加上“百万”，你就会得到百万。

很好，那就完美了！你知道我怎么能得到它，这样只有 y 轴上最上面的刻度有“百万”标签，其余的没有？

它也给了我“100万”而不是“100万”。你知道我怎样才能得到后者吗？我尝试设置这个： var formatValue = d3.format(".2");然后使用：.tickFormat(function(d)return formatValue(d/1000000) + "mil") 但我仍然得到 1 而不是 1.0，抱歉我仍然习惯 d3

哎呀，对不起，我弄清楚了格式，只需将 (".2") 设置为 (".1f") 。我现在需要做的就是只在最上面的刻度上显示“百万”而不是其他刻度。在选择 d3 时遇到一些问题