D3.js 是操作基於數據文件的JavaScript庫。它使用HTML、SVG和CSS讓你的數據基情四射。D3在web標准上着重為你提供現代瀏覽器的全部功能，而且不需要通過使用你自己專門的框架、結合強大的可視化組件和DOM操作的數據驅動方法。
點擊下載最新版（3.5.5）：
或者，在頁面上引用：
<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 =========================
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不會替代瀏覽器的工具箱，但會讓它使用起來更為簡便。
====================== 終於翻譯完畢之分割線 ==========================
原文 ： 戳
欲知后事如何，且聽下回分解。