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

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

前言

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

image.png

  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

image.png

D3js Design ? (D3js的设计)

image.png 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的操作。

image.png

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

image.png

path

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

Q&A

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

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

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

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

最后

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

分类:
前端
收藏成功!
已添加到「」, 点击更改