[live streaming] 一文看懂D3js的设计,学会如何阅读源码。

前言

每周群内直播记录.欢迎大家加入前端可视化学习群.(2022/02/25)

1. what is D3js
2. D3js Design
3. D3js Source code
4. Q&A

---------

what is D3js? (什么是D3js)

D3js is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.

D3js是一个JavaScript库，用于使用web标准可视化数据。D3帮助您使用SVG、画布和HTML将数据带入生活。D3将强大的可视化和交互技术与数据驱动的DOM操作方法相结合，为您提供现代浏览器的全部功能，并为您的数据设计正确的可视化界面。

下文D3js简称D3

D3js Design ? (D3js的设计)

D3的威名在业内可算是top级别的,很多库也是学习借鉴了D3的某一个模块(甚至直接就拿过去用)。这个也是得益于D3设计的优势。D3设计的原则就是最大程度的进行解耦。

1. canvas,svg 作为该库的渲染API。

2. 各个模块进行解耦,包含shape,selection等等...

   • shape 离散的图形形状实现，例如符号、圆弧、直线和区域
   • selection 选择允许对文档对象模型 (DOM) 进行强大的数据驱动转换：设置属性、样式、属性、HTML或文本内容等
   • time 一个计算人类特殊时间约定的计算器
   • path 将画布路径命令序列化到SVG
   • scale 将抽象数据映射到视觉表示的模块。
   • zoom 使用鼠标或触摸输入平移和缩放SVG,HTML或canvas.
   • force 弹性布局算法 采用的四叉树。(可参考我的其他文章)
   • sankey 流向布局算法
   • ...

3. 基于各个模块的融合使用可以构建丰富的图表。

D3js Source code (D3js 源码部分)

selection

对于append.js源码进行了解其实就是dom元素appendChild的操作。

对于classed.js源码进行了解其实就是每个元素class的集合管理

path

对于path.js源码进行了解,其实是对canvas2d的API进行了封装。这个也是D3对于canvas2d支持的一个兼容模块。

Q&A

A同学: 如何学习框架源码 ?

框架源码学习,一定是先有宏观认知,再去学习具体某一个模块代码。什么是宏观认知,了解下框架的设计,背后的故事. 以及它是为了解决什么问题出现。最直接有效的例子 先去吧源码的目录结构搞明白 画一个思维导图进行分析。

可视化学习一定要学习数学,图形学嘛?

当你只是为了满足日常需求开发,就不一定需要学。 但是如果想学好 后面想更深入的学习。那么是的,需要学习。比如线性代数,矩阵等等。我后面会给大家推荐一些完整的学习书籍。

最后

可视化相关的架构设计,源码学习，日常开发。我会逐步进行深入分享。如果对你有帮助请关注我后续的内容。有需要的同学可以加一下我的联系方式(在我的主页,拉你进群聊)。