D3.js 總體展示篇__js

     最近一段時間研究社會成員網路關係圖的一些可視化展示，對大資料視覺效果這片荒漠一籌莫展的自己，幸好發現了D3這片充滿活力的綠洲，我決定在這塊寶地貪婪地大餐一番。

     本文介紹主要來自官網翻譯及使用者使用後感想資料收集 

D3.js是一個對資料（主要針對大資料）進行操縱使之實現可視化的JavaScript庫。

     D3能夠藉助HTML、SVG和CSS等技術將資料展示出來。通俗點，就是網頁製圖，產生互動圖。

      介紹D3的中文書籍現在 只有 《資料視覺效果實戰-使用D3設計互動式圖表》，有興趣大家可以看看

   優點： 

     與其他js實現製圖的方式不同，D3是一個對資料的操作的API.它將資料和網頁SVG綁在了一起，當你的資料發生變化時，圖表會同步更新。比如一個資料數組和SVG柱狀圖中相應y座標綁定，如果這個數組的元素設為隨機變數，定時變化，那麼你看到的柱狀圖也會是不斷變化的動態圖效果。除此之外，他可以接受海量資料的可視化顯示和動態更新。

     D3可以高效操作大資料文檔（大多為json格式），支援大資料集的動態互動和動畫效果。D3的設計風格允許使用代碼重複，在藉助不同的外掛程式或組件的情況下。

     在github上你可以找到很多例子，D3的靈活性，它的隨意綁定資料和元素，以及漂亮的可動性效果展示一定會讓你大吃一驚。

   使用：

      D3的使用，需要引入d3.v3.min.js 或d3.js，你可以到github下載最新的D3 js壓縮版本，也可以通過http連結方式在網頁中引入D3

     關鍵代碼如下：

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

      代碼裡的路徑也可以換成你下載d3後的本地 路徑。

    

    下面通過對比傳統的js寫法，對其代碼文法用法做大體介紹：

    Selections(選中對象)

    傳統寫法 document擷取對象改變並設定其顏色，這麼大一坨代碼。。。。

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

     dynamic（ 動態屬性）

    熟悉DOM架構如jQuery或Prototype的朋友們會很快意識到他們與D3的相似之處。 然而,在D3中樣式、屬性和其他屬性都可以設定為函數的可變資料,而不僅僅是簡單的常量。 儘管他們十分的簡單性,這些函數可是出奇的強大。

   下面邊舉例子邊說明，還是上面的name是p標籤的對象操作，現在要讓他們隨機改變顏色：

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

   接下來講講他對資料的綁定 ，上文function傳的d值，就是繫結資料量引用

   計算屬性常常引用綁定資料。 資料被指定為一個數組的值,每個值作為第一個參數傳遞(d)選擇功能。 使用預設join-by-index,資料數組中的第一個元素傳遞給第一個節點的選擇,第二個元素到第二個節點,等等。 例如,如果您綁定的數組資料區段元素,您可以使用這些資料來計算動態字型大小:  

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

    也可把數組單另拿出來

var data = [4, 8, 15, 16, 23, 42, 12];

d3.selectAll("p")      .data(data)      .style("font-size", function(d) { return d + "px"; }); 

另外，如果資料量很大，需要負載檔案，下面提供幾種載入資料檔案的方式：

  XML載入

d3.xml('example', 'image/svg+xml', function (error, data) {    if (error) {        console.log('載入SVG檔案出錯。', error);    }    else {        // 處理SVG檔案    }});

   json載入

d3.json("miserables.json", function(error, graph) {  }

   檔案可以不加尾碼名。

  上面的代碼主要介紹選中對象的屬性設定作業，下面，讓我們整體看下 對象的設定、添加和刪除都是怎麼做到的

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來展示我們想看到的資料效果，如何?對資料的聚類顯示、節點間如何?網路關係串連、節點屬性資料如何顯示、各類圖形繪製、地圖資訊如何繪製部署節點等內容敬請期待