d3 js轴带小数的百分比值

Question

我正在使用 d3 创建一个图形 - （仍在学习这两个）。 我希望我的 Y 轴以百分比显示值。 Y 轴上的最小值和最大值是动态分配的，因此轴比例有时可以是25% to 38% ，有时甚至是13% to 16% 。

当有一个相对较大的范围（例如25% to 28% ，我可以按原样显示数字，即25%, 28%, 31% ....

然而，对于一个非常小的范围，我注意到它显示为13%, 14%, 14%, 15%, 15%,... （数字重复，可能是因为在幕后它们可能是这样的，比如14.2%和14.8% ）。 在这种情况下，我希望数字出现时指定 1 个小数位，例如13.5% 。

我知道我可以指定

.tickFormat(d3.format(".1%"))

这给了我在那种情况下我需要的东西。 问题是当我有一个更大的比例时，它基本上给了我25.0%, 28.0%, 31.0%,...在这种情况下，我不想要小数精度。

有没有一种简单的方法可以处理每个场景？ 任何指导将不胜感激。

Answer 1

正如评论中提到的，您可以检查范围是否足够大，并根据它添加小数点格式，但这不会很干净。 我建议您将自己的函数作为应用格式的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 。

Answer 2

您已经有了小规模数字的解决方案： d3.format(.1%) 。 对于大规模的数字，您可以使用d3.format(~%) 。 这将自动删除尾随零，例如25.0%, 28.0%, 31.0%,...

d3-format 的文档提到：

~选项在所有格式类型中修剪无关紧要的尾随零。 这最常与r 、 e 、 s和%类型结合使用。