前言

每周群内直播记录.欢送大家退出前端可视化学习群.(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 流向布局算法
    • ...
  1. 基于各个模块的交融应用能够构建丰盛的图表。

D3js Source code (D3js 源码局部)

selection

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

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

path

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

Q&A

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

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

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

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

最初

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