[live streaming] This article understands the design of D3js and learns how to read the source code.

foreword

Weekly live broadcast record in the group. Welcome to join the front-end visualization learning group. (2022/02/25)

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

---------

what is D3js? (what is 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 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 power of a modern browser and designing the right visual interface for your data.

D3js is referred to as D3 below

D3js Design ? (D3js Design)

The reputation of D3 can be regarded as the top level in the industry, and many libraries also learn from a certain module of D3 (or even use it directly). This is also due to the advantages of D3 design. The principle of D3 design is to maximize decoupling.

1. canvas, svg as the rendering API for this library.

2. Each module is decoupled, including shape, selection, etc...

   • shape discrete graphic shape implementations such as symbols, arcs, lines, and regions
   • selection allows powerful data-driven transformations of the Document Object Model (DOM): setting properties, styles, attributes, HTML or text content, etc.
   • time A calculator for calculating human special time conventions
   • path serializes canvas path commands to SVG
   • scale A module that maps abstract data to visual representations.
   • zoom Pan and zoom SVG, HTML or canvas using mouse or touch input.
   • Force The quadtree used by the elastic layout algorithm. (Please refer to my other articles)
   • sankey flow to layout algorithm
   • ...

3. Rich diagrams can be built based on the fusion of various modules.

D3js Source code (D3js source code part)

selection

Understanding the append.js source code is actually the operation of the dom element appendChild.

Understanding the source code of classed.js is actually the collection management of each element class

path

To understand the source code of path.js , it is actually an encapsulation of the canvas2d API. This is also a compatible module that D3 supports for canvas2d.

Q&A

Classmate A: How to learn the framework source code?

Framework source code learning, must first have a macro understanding, and then learn a specific module code. What is macro cognition, understand the design of the framework, the story behind it, and what problems it is designed to solve. The most direct and effective example is to first go to the directory structure of the source code to understand and draw a mind map for analysis.

Visual learning must learn mathematics, graphics?

When you just develop to meet your daily needs, you don't necessarily need to learn. But if you want to learn well, you want to study more deeply. So yes, learning is required. Such as linear algebra, matrices, etc. I will recommend some complete study books to you later.

finally

Visualization related architecture design, source code learning, daily development. I will share in depth step by step. If it helps you, please follow my follow-up content. Students in need can add my contact information (on my homepage, pull you into the group chat).