版權(quán)聲明：本文為博主原創(chuàng)文章橘荠，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議个扰，轉(zhuǎn)載請附上原文出處鏈接和本聲明了嚎。
D3 VS jQuery
剛開始接觸 D3，很容易會聯(lián)想到 jQuery咧七，因為他們在操作元素的語法很相似衰齐。網(wǎng)上有這樣一個問題：What is the difference between D3 and jQuery?
回答：
- D3 is data-driven but jQuery is not: with jQuery you directly manipulate elements, but with D3 you provide data and callbacks through D3’s unique data(), enter() and exit() methods and D3 manipulates elements.
- D3 is usually used for data visualization but jQuery is used for creating web apps. D3 has many data visualization extensions and jQuery has many web app plugins.
- Both are JavaScript DOM manipulation libraries, have CSS selectors and fluent API and are based on web standards which makes them look similar.
粗譯：
- D3 是數(shù)據(jù)驅(qū)動的，而 jQuery 不是继阻。jQuery 只是操作元素耻涛，D3 不僅可以操作元素，還可以使用其特有的 data(), enter() and exit() 方法提供數(shù)據(jù)和回調(diào)瘟檩。
- D3 應(yīng)用于數(shù)據(jù)可視化抹缕，jQuery 應(yīng)用于網(wǎng)頁開發(fā)。D3 有很多數(shù)據(jù)可視化擴展插件墨辛，而 jQuery 有很多 web app 插件卓研。
- 兩者都是 DOM 操作類 JS 庫，都擁有 CSS 樣式選擇器和流暢的 API 且建立在 web 標準上，故而有些相似奏赘。
1. 這里先提示一個小的 error寥闪，也許將來你在開發(fā)中也會遇到：
c-error.png
-- Error: Access to XHTMLHttpRequest at 'file/...' from origin 'null' has been blocked by CORS policy. ......
這個問題的出現(xiàn)是因為使用 file 協(xié)議打開，而 Chrome 不支持這樣訪問磨淌。
解決方案：本地部署 web
- 安裝 http-server
npm i http-server -g
- cd 到 index.html 文件的目錄下橙垢，然后執(zhí)行命令：
http-server
啟動成功會顯示如下界面
terminal.png
- 打開 localhost:8080，可以正常顯示了
2. select(), append(), text() 的使用
新建 HTML 文件伦糯，引入 d3 庫：
<script src="http://d3js.org/d3.v3.min.js"></script>
給個 p 標簽
<p>
This is a test
</p>
然后我們來使用 d3 的 select(), append(), text() 方法:
// 改變 p 元素的文本
d3.select('p').text('test a is this');
// 選中 body 元素追加一個 p 標簽并添加文本
d3
.select('body')
.append('p')
.text('this is the second one');
頁面顯示：
test a is this
this is the second one
3. 畫布和常見幾何圖形
D3 的坐標軸是這樣的昨登，坐標軸原點在左上角
d3axes.png
// 新建畫布你虹，添加寬度高度，但是畫布在網(wǎng)頁中是透明的像云，只有檢查元素時可以看到它的大小區(qū)域
// 使用 SVG 來作圖
var canvas = d3
.select('body')
.append('svg')
.attr('width', 500)
.attr('height', 500);
// 畫圓
var circle = canvas
.append('circle')
.attr('cx', 250)
.attr('cy', 250)
.attr('r', 50)
.attr('fill', 'blue');
var circle = canvas
.append('circle')
.attr('cx', 250) // 圓心在 X 軸的坐標
.attr('cy', 250) // 圓心在 Y 軸的坐標
.attr('r', 5) // 半徑
.attr('fill', '#fff'); // 填充色剂癌，如果不寫淤翔，默認黑色
// 矩形
var rect = canvas
.append('rect')
.attr('width', 70)
.attr('height', 50)
.attr('fill', 'pink');
// 線，以兩個端點固定線的位置佩谷，分別是 x1, x2, y1, y2
var line = canvas
.append('line')
.attr('x1', 49)
.attr('y1', 49)
.attr('x2', 250)
.attr('y2', 250)
.attr('stroke', 'green') // 顏色
.attr('stroke-width', 5); // 粗細
three.png
4. 如何進階學(xué)習(xí)
Github 有中文 API 文檔谐檀，這里只貼出目錄供參考抡谐，詳細信息請查看 API 文檔。
- Arrays (靜態(tài), 查詢, 變換計算, 直方圖)
- Axes 基于比例尺提供人類友好的標尺刻度
- Brushes 使用鼠標或觸摸選擇一維或二維區(qū)域
- Chords 和弦圖
- Collections (Objects, Maps, Sets, Nests -- 根據(jù)指定的規(guī)則將數(shù)組重組為層次結(jié)構(gòu))
- Colors 顏色空間以及轉(zhuǎn)換
- Color Schemes 用于定量桐猬，序數(shù)和分類比例尺的顏色漸變和調(diào)色板
- Contours
- Dispatches 使用命名回調(diào)函數(shù)分離關(guān)注點
- Dragging 使用鼠標或觸摸輸入拖放 SVG, HTML 或者 Canvas
- Delimiter-Separated Values 解析和格式化以分隔符隔開的特定格式文件或字符串麦撵，大多數(shù)情況下指 CSV 和 TSV
- Easings 平滑過渡的過渡函數(shù)
- Fetches 基于 Fetch API 的更為便捷的獲取數(shù)據(jù)方法
- Forces 使用速度 Verlet 積分的力模型仿真布局
- Number Formats 對人類友好的數(shù)值格式化
- Geographies 地理投影, 形狀以及數(shù)學(xué)計算(Paths, Projections, Spherical Math, Spherical Shapes, Streams, Transforms)
- Hierarchies 對層次數(shù)據(jù)進行可視化的一些布局算法
- Interpolators 對數(shù)值、顏色溃肪、字符串免胃、數(shù)組、對象等進行插值
- Paths 將 Canvas 路徑命令序列化為 SVG 路徑字符串
- Polygons 二維多邊形的幾何操作
- Quadtrees 四叉樹, 二維空間遞歸細分
- Random Numbers 基于多種多樣的分布模型生成隨機數(shù)
- Scales 將抽象數(shù)據(jù)映射到可視化表示的編碼(Continuous, Sequential, Quantize, Ordinal)
- Selections 通過選擇元素和綁定數(shù)據(jù)對 DOM 元素進行修改或變換(Selecting, Modifying, Data, Events, Control, Local Variables, Namespaces)
- Shapes 可視化基本圖元(Arcs 圓形或環(huán)形, Pies 餅圖或者環(huán)形圖, Lines 曲線或折線, Areas 面積圖, Curves 曲線, Links 圓滑三次 Bézier 曲線, Symbols 分類形狀編碼, Stacks 堆疊圖)
- Time Formats 受 strptime 和 strftime 啟發(fā)惫撰，時間類型的解析個格式化
- Time Intervals 按照人類對日期的計算方式實現(xiàn)的日期計算
- Timers 一個高效的可以用來管理上千并發(fā)動畫的隊列
- Transitions 對 selections 進行動畫過渡
- Voronoi Diagrams 根據(jù)指定的一組點集計算其泰森多邊形
- Zooming 使用觸摸鼠標或者觸摸面板縮放 SVG, HTML 或者 Canvas
看到這個目錄確實有點頭痛羔沙，更何況每個模塊又有分項列表，很多方法厨钻。我個人的學(xué)習(xí)路徑是:
- 略讀一遍所有方法名稱及其用途
- 將所有模塊按照自己的理解進行分類扼雏，因為方法狠多，全部理解并記住不可行亦無必要莉撇。將模塊再次分類后呢蛤，做到對 D3 的操作有印象，需要用到的時候知道那個類有哪個方法棍郎，再去查閱 API 文檔進行開發(fā)其障。
- 定好目標，不需要太難涂佃，自己動手做一個 demo 練習(xí)下励翼，這個過程很重要蜈敢，可以鍛煉查閱 API 文檔的能力
這里附上我的分類，僅供參考：
| 分類 | 模塊 |
|---|---|
| ?? 計算類 | Arrays, Collections, Hierarchies, Polygons, Quadtrees, Random Numbers, |
| ?? 數(shù)據(jù)處理類 | Dispatches, Delimiter-Separated Values, Fetch, Number Formates, Interpolators, Paths |
| ?? 時間處理類 | Time Formates, Time Intervals, Timers |
| ?? DOM 操作類 | Selections |
| ?? 動畫類 | Easings, Transitions |
| ?? 顏色類 | Color, Color Schemes, |
| ?? 鼠標控制 | Brushes, Dragging, Zooming |
| ?? 地理類 | Geographies |
| ?? 比例調(diào)整類 | Axes, Scales, |
| ?? 圖形類 | Shapes, Voronoi Diagrams, Contours, Forces, Chords |
前五項 ?? 分類是屬于基礎(chǔ)模塊汽抚，也是平時編程會常用（至少有一部分會常用到）的方法抓狭，比如 Arrays, Collections, Fetch... Selection 對應(yīng) jQuery, 動畫類對應(yīng) CSS3. 差不多減少了一半學(xué)習(xí)量。
后面五個 ?? 分類是需要額外學(xué)習(xí)的了造烁，其中鼠標控制類最簡單否过，圖形類最難。
5. 官方畫廊
點開 官方畫廊 的示例惭蟋，發(fā)現(xiàn)下面的代碼根本看不懂
原來 Observable 是一個在線開發(fā)編輯 D3 的工具苗桂，它的語法同我們平時開發(fā)是有些差異的「孀椋快速了解 Observable -- 『干貨|d3創(chuàng)始人又一力作：不僅能在線寫D3.js煤伟，還能讓你寫的更出色 』。
另附 Observable: The User Manual 用戶使用手冊
下一篇文章我會介紹 Observable 使用入門
