d3成神之路(一):先从柱状图开始

上周五我再团队里完成了前端qiankun微服务架构单镜像部署方案的分享,这件事终于告一段落了,这件事本身是一件很有价值的事情,能够较低很大的部署,运维成本。但由于研究期间本职的工作内容排的很满,而且中间又经历了曲折的绩效考核。所以一拖再拖。终于告一断落了。

于是我开始思考,下一阶段研究点什么那br> 除了工作之外的学习内容,我给自己的要求是必须要学点区别于其他人的,着眼于未来的学习内容。在接触了node-red 与 butterfly 之后,我发现它们都使用了d3,大家一致都说d3是一个学习曲线很陡的js库, 上一直有他的传说。
很多优秀的软件只是用了太它的一点皮毛,就让软件增色很多,比如node-red的节点编排,butterfly的节点排版。所以我决定花点时间,好好学习一下它。

首先我先大致浏览了d3的文档,然后看了b站的使用d3进行数据可视化编程的视频。
感觉也不是很难吧,相对于echarts具有丰富的案例,d3只是提供很底层的api,想创造什么,看你的创造力了。

如果不知道的怎么学习一样东西时,可以先试着模仿。
用d3做一些常用的图表,照着echarts的案例做。
人类最开始的学习就是模仿。
就像我的女儿学习拍手,走路,吃饭。

学习d3先来个柱状图吧
照着b站的视频,我也敲出来了这样一个柱状图。

scaleBand() 创建一个序列的条状比例比例尺,它的定义域是一个类目的集合,如,
在这里 定义域就是 元数据名称的集合。

设置完比例尺 就要设置 坐标轴 和渲染数据了

代码解释,待续。。。

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2021年7月26日
下一篇 2021年7月26日

相关推荐