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 動態屬性