ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2019-12-01 10:35:09  阅读:338  来源: 互联网

标签:graphing d3-js javascript


我正在使用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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有