3

我正在使用 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 和公司合作。
  • 我检查了存储库，重点关注d3_scale_linearTickRange() 及其周围的代码，但没有看到一种简单的方法可以在不更改默认功能的情况下实现我的目标，而我需要其他轴。
  • 下面发布了一种可以考虑的潜在解决方法，但它接近于不诚实。
4

2 回答 2

2

您可以手动处理刻度值，如此处所述：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

于 2012-08-23T05:00:59.930 回答
1

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

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

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

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

我确信有更好的方法。

于 2012-05-08T13:19:57.053 回答