javascript - 在 d3.js 中，刻度为 2^(10*c) 而不是 10^c 的线性刻度/轴？

Question

我正在使用 d3.js 来显示有关网络流量的信息，效果非常好。在可视化中的某个点，y 轴用于显示字节数。

我目前正在使用 d3.svg.axis().ticks() 系统，它会产生像 20000 这样的漂亮整数。当转换为 kB/MB/等时，结果是笨拙的数字，如 19.5 和 9.8 .有没有办法在 (2^(10*c)) 的倍数上取返回价，例如 1024、1048576 等，而不是 (10^c) 的倍数？

其他信息/想法:

• 我很感激 svg.axis 为我处理绘画的具体细节，并希望找到一个不会取代此功能的解决方案。
• 我愿意修改 d3 并提交拉取请求，只要它能与@mbostock 和公司合作。
• 我检查了 repo 协议(protocol)，重点关注代码 in and around d3_scale_linearTickRange() ，但看不到在不更改默认功能的情况下实现我的目标的简单方法，我需要其他轴的默认功能。
• 有一种可能的解决方法 posted below可以考虑，但近乎不诚实。

Answer 1

您可以手动处理刻度值，如此处记录:https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues

var xAxis = d3.svg.axis()
    .scale(x)
    .tickValues([1, 2, 3, 5, 8, 13, 21]);

并且您可以使用 tickFormat 来帮助格式化，即修复精度和 SI 前缀。 https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format