d3 中文介紹

是一個基於數據操做文檔JavaScript庫。D3幫助你給數據帶來活力經過使用HTML、SVG和CSS。D3重視Web標準爲你提供現代瀏覽器的所有功能，而不是給你一個專有的框架。結合強大的可視化組件和數據驅動方式操做Dom。

D3容許綁定任何數據到DOM對象模型，而後應用數據驅動轉換到文檔。例如：你能夠用D3從數組生成HTML表格，或者使用相同數據平滑和動態建立一個SVG圖表。

D3不是一個龐大的框架，像想象那樣提供許多功能。相反，D3解決這關鍵問題：基於數據文檔高效操做。避免專有的表現，同時提供良好適應性。公開所有功能，如CSS三、HTML5和SVG網頁標準，不多的開銷，D3速度很是快。支持大數據集和動態交互和動畫效果。D3的功能設計容許代碼重用，經過集合不一樣的組件和插件。

選定對象：Selections

傳統方式

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.js操做

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

D3提供不少方法來變化節點：設置屬性或樣式；註冊時間監聽器；添加，移除或整理節點；更換HTML 或文本內容。

動態屬性

隨機改變顏色

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"; 
});

數據綁定，data數組中第一個元素綁定selection的第一個節點，依次類推

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

當data綁定selection時候，數組的每一個元素都和selection中節點對應。若是節點node數量少於data，多餘的data構成enter 輸入

// 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 提供強大的api 參考，具體訪問 https://github.com/mbostock/d3/wiki/Api%E5%8F%82%E8%80%83

最近在項目中運用到了d3 tree, 詳細的接口說明請看 http://segmentfault.com/blog/joanna123/1190000000422344

下面是一個在項目中運用的實例：

效果圖：

其中加號表明有子節點的，若是有異常，纔會展開子節點，若是沒有異常是不展開子節點。

具體代碼，詳細下面的實例代碼。

http://segmentfault.com/blog/joanna123/1190000000701760