在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和公司合作。
• 我已经检查了回购，专注于代码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

Answer 2

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

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

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

这似乎是不可接受的，因为它会故意引入错误，但如果我能说服自己“只有几个像素”，我可能会为了不对d3本身进行手术而采取行动。< / p>

我确信有更好的方法。