可视化前端开发经验分享

Posted 2021-03-30 财经视界VIG

可视化前端开发经验分享

01

为什么选择基于web进⾏可视化开发？

入门简单，只需掌握基本的html、CSS、javascript知识，就可以快速上手开发。能力完备，2d、3d、复杂图形、丰富交互、大量渲染，只有想不到，没有实现不了。生态丰富，有大量成熟的绘图库开箱即用，参考资料非常丰富。

02

如何拥有良好的绘图能力？

开发前端可视化系统的一个主要工作是绘图。假设你已经具备了基本的HTML、CSS知识，接下来你只需要了解如何绘图。svg和 canvas是在web上用来绘图的画布，建议在 MDN上搜索svg和canvas关键字，可以检索到完整的教程与文档。你会了解到如何用svg或canvas绘制出基本的图形，此时无需研究透彻，了解基本知识即可。

在可视化系统中，我们根据数据映射图形，并提供人机交互的方式来可视分析探索。所以，在掌握了绘制基本图形后，还要学习如何进行可视化映射，如何实现交互。此时需要学习Javascript(JS)的基本知识，通过JS操作DOM或画笔，根据数据调整图形的样式。可以在MDN学习JS的基础知识，在学习过程中与学过的语言(C、Java)对照，能加深不少理解。

03

⼀些学习要点！

为了降低编码的成本，我们会使用一些成熟可靠的开源三方库。我们最常用的就是d3.js了。d3.js 会大大降低绘图成本，比如使用d3.js提供的比例尺进行可视化映射，使用d3提供的布局快速生成一类特定的图，d3.js几乎可以帮助应对所有绘图场景。以前有同学建议刚接触可视化就学习d3.js，但我认为先了解svg和js的基础知识，再学习d3.js，效果会更好。与地图相关时，推荐使用leaflet.js。也可以使用echarts、antv等业界工具通过配置快速生成简单的图表。

开发过程中，必备一些工具，推荐使用Visual Studio Code作为IDE，使用 Google Chrome浏览器作为Web端调试工具（学习如何使用浏览器开发者工具进行调试）。 

在实现过程中，也许会遇到一些困难。比如可视化系统内复杂的数据流，繁重的交互，导致编码成本 很高，且鲁棒性低。此时可以通过精心编码实现功能，也可以尝试了解前端框架，如react 、redux 可视化前端开发经验来解决这类问题，但是要注意，引入框架降低了某些复杂度，也引入了新的复杂度，需要做好权衡， 毕竟我们的目标是实现可视化系统，而非引入框架。 

可视化的前端系统开发不等同于web前端开发，但二者在技术栈上有一些交集，这启示同学们在选择资料时选择自己需要的。 

可视化小组里有⼀些已完成的可视化系统与源码，方便大家参考。一些论文的开源可视化系统，可视化挑战赛作品，也是可参考的资料。对我而言，最有效的学习方式是自己实现一个简单的系统，在这个过程中，根据能力需要检索学习。 

以上列出了一些学习要点，但是实际学习过程中仍然需要搜索相关资料，建议大家选择合适的搜索工具，优先阅读英文版官方资料。除了实验室的项目，很多课程作业、竞赛、活动都可以结合可视化，一方面复用已有工作，另一方面可以创造更多实践机会。

 在学习了相关知识后，大家可以沉淀成文档、文章，组内分享，提高协作效率，共同进步。

04

心路历程

回想起来，可视化小组学习环境非常好，有优秀的导师，已发表的高质量论文，积累的可视化系统，真实的项目提供很多锻炼机会。当然，真实也意味着不是一帆风顺，不是能坐享其成的，每个人都会面临挑战，而每个人从挑战里汲取的养料都是不⼀样的。我在刚接触可视化时，懵懵懂懂，也是运⽓好，有⽼师帮助，才少走了⼀些弯路。如今看来，很多弯路是不必要的，完全可以把精⼒放在更重要的事情上。根据自己的经历，给大家⼀些建议：

1:珍惜宝贵的学习环境

在很多学校，本科同学为了争取在实验室学习做科研的机会，要付出非常多的努力，相比之下，有些同学因为一时优秀轻松进⼊可视化小组却不珍惜，白白浪费机会。 

2:不要将自己定位为“码农”

多做多学，承担更多责任。很多看似普通的工作，深入进去会看到很多机会。组里合作时可能有明确分工，但这不代表工作有边界。

 3:沟通交流

组内积极发言，不要怕说错话。提问前做好准备，尝试给出解决方案。及时同步进展， 寻求反馈建议。

 4:不要忽略GPA

留学、五年后的自己想留学、某些企业求职，都是需要GPA的。当然，高GPA本身也意味着学得扎实。这些也许是老生常谈的建议，但是能保持思考和实践才是最难的。

文案/郭智勇

排版/杨晓蓉

审核/张翔