前言

每周群内直播记录. 欢送大家退出前端可视化学习群.(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 同学: 如何学习框架源码 ?

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

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

当你只是为了满足日常需要开发, 就不肯定须要学。然而如果想学好 前面想更深刻的学习。那么是的, 须要学习。比方线性代数, 矩阵等等。我前面会给大家举荐一些残缺的学习书籍。

最初

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