D3.js入门笔记

D3.js入门笔记

最近一直在开发3D可视化组件，偶尔也开发2D的组件。但是2D我也是用3D的方式开发的，感觉有点浪费。所以打算入手一下D3，毕竟D3还是挺有市场的灵活性非常大，很适合二次开发。
d3官网：https://d3js.org/
d3案例：https://github.com/d3/d3/wiki/Gallery
d3教程：https://github.com/d3/d3/wiki/Tutorials
d3 API：https://github.com/d3/d3/blob/master/API.md

mbostock案例地址：https://bl.ocks.org/mbostock 这个地址案例比官网的多

1 安装D3

1. 通过npm的方式安装：npm install d3 --save，我现在的版本是5.9.2
   然后引入d3 import * as d3 from "d3";

2. 直接引入<script src="https://d3js.org/d3.v5.min.js"></script>

2 D3数据驱动的文档

d3的主页有个简短的文档，很有必要认真了解一下。

2.1简介

1. D3允许您将任意数据绑定到文档对象模型（DOM），然后将数据驱动的转换应用于文档。例如，您可以使用D3从数组中生成HTML表。或者，使用相同的数据创建具有平滑过渡和交互的交互式SVG条形图。
   D3不是一个单一的框架，旨在提供所有可能的功能。相反，D3解决了问题的关键：基于数据有效地处理文档。这避免了专有的表示，并提供了非凡的灵活性，暴露了HTML，SVG和CSS等Web标准的全部功能。D3的开销极小，支持大型数据集和交互动画的动态行为。D3的功能风格允许通过各种官方和社区开发的模块重用代码。

2.2选择器

2.3 动态属性