1、了解可視化
（1）什么是可視化
可視化是將數(shù)據(jù)組織成易于為人所理解和認(rèn)知的結(jié)構(gòu)，然后用圖形的方式形象地呈現(xiàn)出來的理論、方法和技術(shù)。實(shí)現(xiàn)可視化有兩個(gè)關(guān)鍵要素，一個(gè)是數(shù)據(jù)，另一個(gè)是圖形。如果要考慮在計(jì)算機(jī)上呈現(xiàn)，那還要加上交互。
（2）Web 前端與可視化的區(qū)別
不同點(diǎn)
a.技術(shù)棧不同
Web 開發(fā)主要以 HTML 來描述結(jié)構(gòu)，以 CSS 來描述表現(xiàn)，以 JavaScript 來描述行為。而可視化則較少涉及 HTML 和 CSS，它更多地要同瀏覽器的 Canvas、SVG、WebGL 等其他圖形 API 打交道。
b.Web 開發(fā)著重于處理普通的文本和多媒體信息，渲染普通的、易于閱讀的文本和多媒體內(nèi)容，而可視化開發(fā)則著重于處理結(jié)構(gòu)化數(shù)據(jù)，渲染各種相對(duì)復(fù)雜的圖表和圖形元素。
相同點(diǎn)
a.可視化與 Web 前端一樣，最終都是以圖像呈現(xiàn)在瀏覽器上，因此有許多通用的方法論。
b.二者都使用 JavaScript，而且都是瀏覽器端的 JavaScript。
c.與 Web 前端一樣，可視化領(lǐng)域也有豐富的 JavaScript 工具和活躍的生態(tài)
（3）工具
工具可視化領(lǐng)域的工具可視化領(lǐng)域經(jīng)過多年的發(fā)展，有非常多豐富的工具。我們可以把這些工具大體上分為四類，分別是：
a.專業(yè)呈現(xiàn)各種類型圖表的圖表庫：ECharts，或者類似的Chartist、Chart.js；
b.專業(yè)處理地圖、地理位置的可視化地理庫：社區(qū)中比較成熟的 GIS 庫也不少，比較常見的像Mapbox、Leaflet、Deck.gl、CesiumJS；
c.專業(yè)處理視覺呈現(xiàn)的渲染庫：如果要繪制其他更靈活的圖形、圖像或者物理模型，我們常用的一些圖表庫就不一定能完成了。這個(gè)時(shí)候，我們可以用ThreeJS、SpriteJS這樣比較通用的渲染庫（實(shí)際上圖表庫或 GIS 地圖庫本身底層渲染也基于這些渲染庫）。我們可以選擇通用的圖形庫，比如，2D 渲染可以選擇 SpriteJS，3D 渲染可以選擇 ThreeJS、BabylonJS 以及 SpriteJS3D 擴(kuò)展等等。
d.處理數(shù)據(jù)的數(shù)據(jù)驅(qū)動(dòng)框架：它們更專注于處理數(shù)據(jù)的組織形式，而將數(shù)據(jù)呈現(xiàn)交給更底層的圖形系統(tǒng)（DOM、SVG、Canvas）或通用圖形庫（SpriteJS、ThreeJS）去完成。
2、圖形
（1）實(shí)現(xiàn)可視化的 4 種方式
方式一：傳統(tǒng)的 HTML + CSS
方式二：聲明式 SVG
方式三：指令式 Canvas2D
1、Canvas 元素和 2D 上下文
對(duì)瀏覽器來說，Canvas 也是 HTML 元素，我們可以用 canvas 標(biāo)簽將它插入到 HTML 內(nèi)容中。比如，我們可以在 body 里插入一個(gè)寬、高分別為 512 的 canvas 元素。
<body> <canvas width="512" height="512"></canvas></body>
畫布寬高
Canvas 的 HTML 屬性寬高為畫布寬高
樣式寬高
CSS 樣式寬高為樣式寬高
canvas { width: 256px; height: 256px;}
因?yàn)楫嫴紝捀邲Q定了可視區(qū)域的坐標(biāo)范圍，所以 Canvas 將畫布寬高和樣式寬高分開的做法，能更方便地適配不同的顯示設(shè)備。
2、Canvas 的坐標(biāo)系
Canvas 的坐標(biāo)系和瀏覽器窗口的坐標(biāo)系類似，它們都默認(rèn)左上角為坐標(biāo)原點(diǎn)，x 軸水平向右，y 軸垂直向下。那在我們?cè)O(shè)置好的畫布寬高為 512*512 的 Canvas 畫布中，它的左上角坐標(biāo)值為（0,0），右下角坐標(biāo)值為（512,512） 。這意味著，坐標(biāo)（0,0）到（512,512）之間的所有圖形，都會(huì)被瀏覽器渲染到畫布上。
注意，上圖中這個(gè)坐標(biāo)系的 y 軸向下，意味著這個(gè)坐標(biāo)系和笛卡爾坐標(biāo)系不同，它們的 y 軸是相反的。
3、利用 Canvas 繪制幾何圖形
第一步，獲取 Canvas 上下文。
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
我們拿到的 context 對(duì)象上會(huì)有許多 API，它們大體上可以分為兩類：一類是設(shè)置狀態(tài)的 API，可以設(shè)置或改變當(dāng)前的繪圖狀態(tài)，比如，改變要繪制圖形的顏色、線寬、坐標(biāo)變換等等；另一類是繪制指令 API，用來繪制不同形狀的幾何圖形。
第二步，用 Canvas 上下文繪制圖形。
const rectSize = [100, 100];
context.fillStyle = 'red';
context.beginPath();
context.rect(0.5 * canvas.width, 0.5 * canvas.height, ...rectSize);
context.fill();
context.rect 是繪制矩形的 Canvas 指令，它的四個(gè)參數(shù)分別表示要繪制的矩形的 x、y 坐標(biāo)和寬高。在這里我們要繪制的正方形寬高都是 100，所以后兩個(gè)參數(shù)是 100 和 100。
我要將正方形填充成紅色，這一步通過調(diào)用 context.fillStyle 指令就可以完成。然后，我們要調(diào)用一個(gè) beginPath 的指令，告訴 Canvas 我們現(xiàn)在繪制的路徑。接著，才是調(diào)用 rect 指令完成繪圖。最后，我們還要調(diào)用 fill 指令，將繪制的內(nèi)容真正輸出到畫布中。
5、如何將畫出來的正方形處于坐標(biāo)中心
第一種做法是，我們可以讓 rect 指令的 x、y 參數(shù)，等于畫布寬高的一半分別減去矩形自身寬高的一半。這樣，我們就把正方形的中心點(diǎn)真正地移動(dòng)到畫布中心了。
context.rect(0.5 * (canvas.width - rectSize[0]), 0.5 * (canvas.height - rectSize[1]), ...rectSize);
第二種做法是，我們可以先給畫布設(shè)置一個(gè)平移變換（Translate），然后再進(jìn)行繪制。
context.translate(-0.5 * rectSize[0], -0.5 * rectSize[1]);
這種做法記得把畫布狀態(tài)給恢復(fù)回來
提供兩種方式：
第一種是反向平移
// 平移
context.translate(-0.5 * rectSize[0], -0.5 * rectSize[1]);
... 執(zhí)行繪制
// 恢復(fù)
context.translate(0.5 * rectSize[0], 0.5 * rectSize[1]);
Canvas 上下文還提供了 save 和 restore 指令
context.save(); // 暫存狀態(tài)
// 平移
context.translate(-0.5 * rectSize[0], -0.5 * rectSize[1]);
... 執(zhí)行繪制
context.restore(); // 恢復(fù)狀態(tài)
利用 Canvas 繪制矩形的過程?？偨Y(jié)為了 5 個(gè)步驟：
1、獲取 Canvas 對(duì)象，通過 getContext(‘2d’) 得到 2D 上下文；
2、設(shè)置繪圖狀態(tài)，比如填充顏色 fillStyle，平移變換 translate 等等；
3、調(diào)用 beginPath 指令開始繪制圖形；
4、調(diào)用繪圖指令，比如 rect，表示繪制矩形；
5、調(diào)用 fill 指令，將繪制內(nèi)容真正輸出到畫布上。
如何用 Canvas 繪制層次關(guān)系圖？
優(yōu)缺點(diǎn)
總結(jié)
