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

【问题标题】：In d3.js, linear scale/axis with ticks at intervals of 2^(10*c) instead of 10^c?在 d3.js 中，线性刻度/轴的刻度间隔为 2^(10*c) 而不是 10^c？
【发布时间】：2012-05-08 02:03:03
【问题描述】：

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

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

其他信息/想法：

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

【问题讨论】：

标签： javascript d3.js graphing

【解决方案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

【讨论】：

这可行。我现在还对轴进行了很多更改，因此我必须根据需要重新生成刻度值......下次我在代码的那个区域时会尝试一下。跨度>

【解决方案2】：

一种解决方法是以不正确的方式使用标签千和兆，除以 1000 而不是 1024 来获得最终结果。

Instead of:
20000 B / 1024 = 19.5 kB     :(

Stretch the truth with:
20000 B / 1000 = 20 kB       :)

从表面上看，这似乎是不可接受的，因为它会故意引入错误，但如果我能说服自己它“只有几个像素”，我可能会为了不对 d3 本身进行手术而选择它。

我确信有更好的方法。

【讨论】：