初探d3-我的前端可视化工作流程总结

前言

d3是前端可视化中的一个常用工具,其重要程度,就到现在的体验看来,类似于Jquery之于前框架时期(即React,Angular, Vue还未出江湖之前的时代)的前端。它用起来挺像JQuery,同时也增加了很多独有的功能。随着浏览器能力的逐渐加强以及Javascript底层性能的优化,网页必然承担起更多的功能,那么前端开发人员,乃至数据可视化这一小块需要处理的业务也只会增加不会减少,个人估计,就像现在的页面开发一样,前端可视化这一块早晚也会出现自己的框架吧。

工作流程

  • 接到需求
  • 看看d3Gallery中看有没有类似案例

  • 自己在Observable中fork一个,理解代码并修改细节

  • 放到公司电脑里用webpack打包成单文件形式,上第一版、等待UI,产品搞事情、正式上线。

d3基本使用感想

d3类似于一个介于SVG/Canvas和数据之间的处理器,根据不同的需求把数据转换为不同的图形,但是这些图形的特性并不是d3规定的,而是SVG/Canvas之类的底层实现规定的。所以SVG也很重要,目前正在寻找一本规范介绍SVG的书单。

Observable

[施工中……]

对于d3学习比较有帮助的网站

  • d3InDepth
    • 这个网站提供一些比较基本的样例和很好的代码解释,建议全部看一遍来了解d3主要有哪些模块,可以拿来做什么事情
  • how selection work
    • Mike Bostock, Observable和d3的co-founder。它的博客应该可以称得上权威了,如果英文苦手的话可以看译文