带有小数的d3 js轴百分比值
我正在使用d3创建一个图-(还在学习这两种图形)。我希望我的Y轴以百分比显示值。Y轴上的最小值和最大值是动态分配的，因此轴尺度有时可以是25% to 38%，有时甚至可以是13% to 16%。
当有一个相对较大的范围，如25% to 28%，我很好的数字出现的是他们，即25%, 28%, 31% ....
然而，对于一个非常小的范围，我注意到它看起来是13%, 14%, 14%, 15%, 15%,... (数字重复，可能是因为在幕后他们可能会说，14.2%和14.8%)。在这种情况下，我希望数字以指定的小数位(如13.5% )出现。
我知道我可以说
.tickFormat(d3.format(".1%"))这给了我在那种情况下我需要的东西。问题是，当我有一个更大的标度时，它基本上给了我25.0%, 28.0%, 31.0%,...，在这个例子中，我不想要十进制的精度。
有什么简单的方法可以处理每一种情况吗？如有任何指导，将不胜感激。
回答 2
Stack Overflow用户
发布于 2016-06-28 14:39:07
正如注释中提到的，您可以检查范围是否足够大，并根据这一点添加小数点格式，但这不是很清楚。我建议您将自己的函数作为应用格式的tickFormat传递，这取决于值是否有小数部分。类似于：
// defined your formatters somewhere above
var decimalFormatter = d3.format(".1");
myAxis.tickFormat(function(d) {
if (!Number.isInteger(d)) {
d = decimalFormatter(d); // add the decimal point for non-integers
}
return d + '%';
}样本代码：
// defined your formatters somewhere above
var decimalFormatter = d3.format(".1");
var tickFormat = function(d) {
if (!Number.isInteger(d)) {
d = decimalFormatter(d); // add the decimal point for non-integers
}
return d + '%';
};
console.log(tickFormat(12.5)); // 12.5%
console.log(tickFormat(14)); // 14%
console.log(tickFormat(15)); // 15%<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
可以根据需要以任何特定的方式调整上面的函数。例如，如果使用字符串而不是数字，则需要首先转换为数字，然后使用Number.isInteger，因为它总是返回字符串的false。
Stack Overflow用户
发布于 2021-06-07 14:50:55
您已经有了小规模数字的解决方案：d3.format(.1%)。对于大规模的数字，您可以使用d3.format(~%)。这将自动删除例如25.0%, 28.0%, 31.0%,...的尾随零。
D3格式的文档提到：
~选项在所有格式类型中对不重要的尾随零进行调整。这是最常用的结合类型r，e，s和%。
https://stackoverflow.com/questions/38078924
复制相似问题
腾讯云开发者
