D3.js是一個強大的數據可視化javascript庫。D3可以幫助您使用HTML，SVG和CSS將數據以非常直觀的方式呈現出來。 D3js對WEB標準支持的非常友好，基本可以完美兼容當前各種瀏覽器。有了D3js的數據驅動模式，我們不用再糾結可視化的細節，要做的工作就是將數據轉成D3js能識別的特定格式(JSON)。
要下載D3js的最新版本(4.7.4), 請點擊這裏:d3.zip
想要直接鏈接到最新版本，可以使用下麵的代碼片段：
< script src="https://d3js.org/d3.v4.min.js" >< /script >完整的源代碼和測試也可以在GitHub上下載。下文中將D3js簡稱為D3。
簡介
D3允許您將任意數據綁定到文檔對象模型（DOM），然後將數據驅動的轉換應用於文檔。例如，您可以使用D3從數組中生成HTML表。或者，使用相同的數據創建具有平滑過渡和交互的交互式SVG條形圖。
D3不是一個單一的框架，旨在提供每一個可想到的功能。相反，D3解決了問題的關鍵：基於數據高效地處理文檔。這避免了專有的表示，並提供了非凡的靈活性，能夠使用HTML，SVG和CSS等Web標準的全部功能。D3非常快，能以最小的開銷支持大數據集和交互動畫的動態行為。 D3的函數是風格允許通過不同的組件和插件集合來做代碼重用。
選擇器(Selections)
使用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采用聲明式方法，稱為選擇（Selections），可以對任意節點集進行操作。例如，您可以將上述循環重寫為：
d3.selectAll("p").style("color", "white");也可以根據需要直接操作節點：
d3.select("body").style("background-color", "black");選擇器由W3C Selectors API定義，現在瀏覽器都能原生支持。 Sizzle可以提供舊版瀏覽器的向後兼容性。以上示例按標簽名稱分別選擇節點（“p”和“body”）。可以使用各種謂詞（包括包含，屬性值，類和ID）來選擇元素。
D3提供了許多改變節點的方法：設置屬性或樣式;注冊事件監聽器;添加、刪除或排序節點;改變HTML或文本內容。這些足以應付絕大多數的需求。直接訪問底層DOM也是可能的，因為每個D3選擇隻是一個節點數組。
動態屬性(Dynamic Properties)
熟悉其他DOM框架（如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）傳遞給選擇函數。使用默認的join-by-index，數據數組中的第一個元素被傳遞到選擇中的第一個節點，第二個元素傳遞給第二個節點，依此類推。例如，如果將數組數組綁定到段落元素，則可以使用這些數字來計算動態字體大小：
d3.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.style("font-size", function(d) { return d + "px"; });
數據綁定到文檔後，可以省略數據操作符; D3將檢索先前綁定的數據。這允許您重新計算屬性，而不需要重新綁定。
進入和退出(Enter and Exit)
使用D3的進入和退出選擇，您可以為傳入數據創建新的節點，並刪除不再需要的傳出節點。
當數據綁定到選擇時，數據數組中的每個元素都與選擇中的相應節點配對。如果節點數量少於數據，則額外的數據元素將形成輸入選擇，您可以通過追加到輸入選擇進行實例化。例如：
d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d) { return "I’m number " + d + "!"; });
更新節點是默認選擇 - 數據操作的結果。因此，如果您忘記了進入和退出選擇，您將僅自動選擇存在相應數據的元素。一個常見的模式是將初始選擇分為三個部分：要修改的更新節點，要添加的輸入節點和要刪除的退出節點。
// Update…
var p = d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return d; });
// Enter…
p.enter().append("p")
.text(function(d) { return d; });
// Exit…
p.exit().remove();
通過分別處理這三種情況，您可以精確地指定哪些操作在哪些節點上運行。這提高了性能，並提供了對轉換更好的控製。例如，使用條形圖，您可以使用舊刻度來初始化輸入欄，然後將更改和退出欄的條目轉換到新的刻度。
D3允許您根據數據轉換文檔;這包括創建和銷毀元素。 D3允許您更改現有文檔以響應用戶交互、隨時間變化的動畫、甚至來自第三方的異步通知。混合方法也是可能的：文檔最初在服務器上呈現，並且通過D3在客戶端上更新。
轉換而不是表達(Transformation, not Representation)
D3並不引入新的視覺表示。與Processing，Raphaël或Protovis不同，D3的圖形標記詞匯直接來自Web標準：HTML，SVG和CSS。例如，您可以使用D3創建SVG元素，並使用外部樣式表進行樣式化。您可以使用複合過濾器效果，虛線和裁剪。如果瀏覽器供應商明天推出新功能，您將能夠立即使用它們，無需進行工具包更新。而且，如果您將來決定使用除D3以外的工具包，您可以隨身攜帶您的標準知識！
最重要的是，D3使用瀏覽器的內置元素檢查器很容易調試：您使用D3操作的節點正是瀏覽器原生理解的節點。
漸變(Transitions)
D3聚焦於將轉換自然擴展到動畫漸變。隨時間變化自動插入樣式和屬性。可以通過諸如“彈性”，“立方英寸”和“線性”的鬆弛功能來控製補片。 D3的插值器支持原語，例如字符串中嵌入的數字和數字（字體大小，路徑數據等）和複合值。您甚至可以擴展D3的interpolator注冊表，以支持複雜的屬性和數據結構。
d3.select("body").transition()
.style("background-color", "black");
或者，以一個錯開的(staggered)延遲來調整符號圖中的圈子大小：
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不會取代瀏覽器的工具箱，而是擴展成更容易使用的方式。
