数据驱动 DOM，Data-Driven Documents（数据驱动文档）的简称

d3对 DOM 操作进行了封装，和 jQuery 类似；
d3 依赖于选择符选中一组元素，建立一个集合，然后使用集合对象的方法操作DOM

d3.js 的核心是对数据和可视化元素的绑定
一个数据对应一个可视化元素，一个数值对应一个可视化元素的属性
d3封装了绑定的复杂过程，让我们可以简单的通过声明数据和可视化元素来完成数据可视化的任务

要将数据映射到图形，有很多琐碎的工作，比如数据范围的变换、插值的计算、布局的 计算等等。d3.js的大量功能是集中在这样的数据处理方面的

d3.js 官网 https://d3js.org
d3.js Github https://github.com/d3/d3.git
d3.js 案例 https://bl.ocks.org/mbostock
d3.js API https://github.com/d3/d3/blob/master/API.md
d3.js Gallery https://github.com/d3/d3/wiki/Gallery
https://selinatang95.github.io/EDAVCommunity/

  1. yarn add d3 d3-tip d3-cloud
  3. import * as d3 from "d3";
  4. // 动态导入
  5. const d3 = await import("d3");
  6. // 远程导入
  7. import {selectAll} from "https://cdn.skypack.dev/d3-selection@3";

image.png
image.png

d3.js 资料

d3.js Book https://github.com/alignedleft/d3-book

svg编辑器

https://c.runoob.com/more/svgeditor/
https://github.com/methodofaction/Method-Draw
https://editor.method.ac/
image.png

d3.js 案例