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

我正在使用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和company一起使用即可.
>我已经检查了回购协议,着重于代码in and around d3_scale_linearTickRange(),但没有看到一种简单的方法来实现我的目标而不更改默认功能,而我需要其他轴.
>可以考虑采用一种潜在的变通方法posted below,但这种做法不诚实.

解决方法:

您可以手动处理刻度值,如下所示：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

标签：graphing,d3-js,javascript
来源： https://codeday.me/bug/20191201/2080220.html