[D3.js] 綜述

D3.js 是操做基於數據文件的JavaScript庫。它使用HTML、SVG和CSS讓你的數據基情四射。D3在web標準上着重爲你提供現代瀏覽器的所有功能，並且不須要經過使用你本身專門的框架、結合強大的可視化組件和DOM操做的數據驅動方法。

點擊下載最新版（3.5.5）：

• d3.zip

或者，在頁面上引用：

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

使用HTTPS的站點應該使用本機下的D3，或者支持HTTPS的CDN，例如 CDNJS  完整的資源和用例 也能夠在GitHub上 下載 。

 

# 引言

D3容許你將任意的數據綁定到文檔對象模型（DOM），而後運用數據驅動轉換到文檔上。例如，你可使用D3將一個數組生成一個HTML表格。或者，使用相同的數據來建立一個有平滑過渡和交互的交互式SVG條形圖。

D3不是一個旨在提供每個可能想到的功能的單一框架。相反的，D3所解決的問題的關鍵是：高效操做基於數據的文檔。它提供了顯著的靈活性，展示了web標準的所有功能，好比HTML、SVG 和 CSS。D3很是快，它以最小的開銷支持大型數據集以及交互與動畫的動態行爲。D3的函數式風格使代碼經過組件和插件的多元化集合得以重用。

 

# 選集（選擇器？）

使用W3C DOM API來修改文檔是很沒勁的：方法名冗長，當即執行方法須要手動迭代和登記臨時狀態。例如，更改段落的文本顏色：

var paragraphs = document.getElementsByTagName("p"); for (var i = 0; i < paragraphs.length; i++) { var paragraph = paragraphs.item(i); paragraph.style.setProperty("color","white", null); }

 D3採用已聲明好的方法，操做任意的節點集合即選擇器。例如，能夠將上面的循環改寫爲：

d3.selectAll("p").style("color", "white");

 固然，你也能夠操做所需的單一節點：

d3.select("body").style("background-color", "black");

選擇器是W3C Selectors API中定義的一個概念，也受現代瀏覽器原生支持。Sizzle（jQuery1.3版之後引進的CSS選擇器引擎）爲舊版的瀏覽器提供了向後兼容。上述例子中是經過標籤名（分別是「p」和「body」）來選擇節點。元素也能夠經過各類形式被選擇，包括容器，屬性值，class 和 id。
D3提供許多方法去操做節點：設置屬性或樣式；註冊事件監聽；添加、移除或查找節點；變換HTML或文本內容。這些足以知足絕大部分的需求。直接訪問底層的DOM也是能夠的，由於D3選擇器只是一個簡單的節點數組。

# 動態屬性
 熟悉 jQuery 或 Prototype 的讀者應該立刻能意識到D3的類似之處。然而，樣式、屬性和其餘特性在D3中都被認作是數據的方法，而不僅是簡單的常量。儘管它們表面上看起來很簡單，但這些方法卻很是強大。例如d3.geo.path這個方法能夠將地理座標工程化爲SVG的路徑數據。D3提供不少內置可重複使用的方法和方法工廠，好比面積圖、折線圖、餅圖等圖的 圖像元。
例如，給段落隨機添加顏色：

d3.selectAll("p").style("color", function() { return "hsl(" + Math.random() * 360 + ",100%,50%)"; });

 用灰白將奇偶節點交替着色：

d3.selectAll("p").style("color", function(d, i) { return i % 2 ? "#fff" : "#eee"; });

計算屬性每每涉及到數據綁定。數據被約定爲一個數組，這些值會做爲第一個參數(d)傳到方法裏面。經過默認的按索引加入，數組裏的第一個元素會被傳給選擇器裏的第一個節點，第二個元素傳給第二個節點，以此類推。舉個栗子，將一個數組綁定到段落元素，用這些數據來給段落動態地渲染字體大小：

d3.selectAll("p") .data([4, 8, 15, 16, 23, 42]) .style("font-size", function(d) { return d + "px"; });

一旦數據被綁定到文檔上，你就能夠省去了對數據的操做；D3將會自動檢索以前綁定的數據。這樣你就不須要從新綁定而後再去計算屬性了。

 

# Enter & Exit

使用D3的 enter 和 exit，能夠爲傳入的數據建立新節點以及移除一些再也不須要了的節點。

當數據綁定到選擇器上時，每一個數據元素將會與選擇器裏的相應節點配對。若是節點比數據少，使用enter來append節點，那些多出來的數據就能夠做爲它的參數。例如：

d3.select("body").selectAll("p") .data([4, 8, 15, 16, 23, 42]) .enter().append("p") .text(function(d) { return "I’m number " + d + "!"; });

 

 數據操做的默認結果是更新節點。所以，若是沒有enter和exit，則只是自動選擇那些與已有節點匹配的元素。data操做符返回的是三個部分（虛擬選集）：enter, updata, exit.

====================== P.S. 分割線 begin =========================

PS：關於selections 的一篇美文

enter選集：對全部缺失的元素以佔位符placeholder替代。

update選集：包含現有的元素，並綁定到數據

剩下的元素最終都會出如今exit選集中，並被移除。

===================== P.S. 分割線 end ===========================

// Update…
var p = d3.select("body").selectAll("p") .data([4, 8, 15, 16, 23, 42]) .text(String); // Enter…
p.enter().append("p") .text(String); // Exit…
p.exit().remove();

 

 經過單獨處理這三種情形，你能夠清晰地看出哪些操做是運行在哪些節點上的。這提升了性能也爲一些過渡提供了更好的控制。例如，一個條形圖，你能夠先用一些舊的數據初始化它，而後在更新的過程當中再用新的數據過渡轉換一下，最後把多餘的元素移除。

D3使你可以根據數據去變換文檔，其中包括建立和刪除元素。它能夠經過響應用戶交互、一段時間內的動畫或者第三方的異步通知來改變已有的文檔。在服務端將文檔初始渲染好，而後在客戶端經過D3去更新它，這種混合的方法一般也是ok的。

 

# 轉換（Transformation）而不是表示（ Representation）

D3不是一個新的圖形表示庫。不像Processing, Raphaël, 或者 Protovis，D3的標記詞彙都是直接來自web標準：HTML、SVG 和 CSS。好比說，你能夠用D3來建立一個SVG元素而後用外部的層疊樣式表來渲染它。你可使用綜合的過濾效果，dashed strokes 和 clipping。假設未來瀏覽器廠商推出了新的功能，你就能立刻使用它們——不須要更新工具包。並且，若是你之後要使用D3之外的工具包，你也已經造成了這些標準的知識。

最厲害的是，D3能夠簡便地用瀏覽器的審查元素來調試：那些你用D3操做的節點實際上也是瀏覽器自己已知道的節點。

 

# Transitions

D3在變換上的重點天然延伸到了過渡動畫。過渡是隨時間逐漸插補一些樣式和屬性。漸變更畫能夠經過easing方法來控制效果，例如「elastic」, 「cubic-in-out」 和 「linear」。D3的插補器既支持原語，例如數字還有字符串中的數字（字體大小，路徑數據，等），也支持複合值。甚至你能夠本身拓展D3插補器的註冊表去支持複雜的屬性和數據結構。

例，將頁面背景褪化爲黑色：

d3.select("body").transition() .style("background-color", "black");

Or，有延遲地調整一個圓的大小：

d3.selectAll("circle").transition() .duration(750) .delay(function(d, i) { return i * 10; }) .attr("r", function(d) { return Math.sqrt(d * scale); });

 實際上D3僅經過修改屬性，減小了開銷，而且可以處理高幀速的大型複雜圖形。D3也能夠經過事件處理完成一系列複雜的過渡。並且，你還能使用css3過渡；D3不會替代瀏覽器的工具箱，但會讓它使用起來更爲簡便。

 

====================== 終於翻譯完畢之分割線 ==========================

 原文 ： 戳

欲知後事如何，且聽下回分解。