D3 入門概念 - 資料繫結

Web 資料視覺化 - D3 入門概念

D3 著眼於資料處理,除了優異的DOM操作功能之外,最核心的關鍵功能便是資料綁定,一旦瞭解如何設計,你將能夠輕易透過D3將文字資料轉換成圖表進行呈現。

透過 JavaScript 處理資料並不容易,D3是為了簡化資料處理作業而開發的一套函式庫,特別擅長執行資料的視覺化呈現,無論陣列、JSON 或是 CSV 資料,搭配簡單的DOM元素或是 SVG,均能有效的進行內容的整合與圖形轉換運算。
考慮以下的陣列資料:
var numbers = [6, 8, 10, 2, 4, 1, 5, 9];
以下嘗試將陣列資料取出,配置一個 div 元素以顯示陣列內容,並且設定其id屬性以方便存取。
<div id="area">
</div>
利用 JavaScript 讀取陣列中的每一筆資料:
for (var i = 0; i < numbers.length; i++) {
var p = document.createElement('p');
p.textContent = i.toString();
document.getElementById('area').appendChild(p);
}
for迴圈依序取出陣列中的所有元素,設定給新建立的p元素,最後將其嵌入div中。 接下來利用 D3 實作相同的過程:
d3.select('#area').
selectAll('p').
data(numbers).enter().
append('p').
text(function (d) {
        return d.toString()
});
data() 為此段程式碼的關鍵,將要處理的資料物件傳入-這裏是 numbers ,它會解析這個資料物件,並且如同迴圈邏輯,根據其中的資料筆數,逐一取出每一筆資料作處理,enter()表示針對data() 所取得的資料建立新的節點,到目前為止是資料萃取的部份,接下來則是建立節點的內容,由於傳入的資料物件numbers 有8筆資料,因此會有8個p節點會被建立,然後根據text()的參數建立其文字內容。 資料(numbers)是逐次動態取出的, text() 參數透過回呼函式即時讀取,請注意function(d)中的d表示每一次取出的單筆資料,這個觀念非常重要,後續進一步討論其它更複雜的格式資料處理時,會應用到這裏的原理。
6
8
10
2
4
1
5
9
上面演示的程式碼中,無論 JavaScript 或是 D3 語法,都會得到相同的結果,其中配置了8個p元素,並且呈現陣列中的資料,不過 D3 在撰寫上要容易許多,這對於複雜的資料處理相當有用。 鏈結語法萃取的資料,可直接於回呼函式中整合圖表的描繪邏輯,簡單的圖表可以透過 DOM 描繪,更複雜的圖形則必須進一步依賴 SVG技術。 現在進一步將上述的資料轉換成為圖表,首先建立一個樣式類別bar:
.bar{
background-color:#4169e1;
 color:#fff;
    text-align:right;
    padding:4px 1em;
}
這一段設計提供長條圖所需的背景、文字以及邊界樣式內容,接下來再根據資料指定寬度並呈現資料即可,調整程式內容如下:
d3.select('#area').
selectAll('p').
data(numbers).enter().
append('p').
attr('class', 'bar').
text(function (d) {
     return (d.toString());
}).style('width' ,function (d) {
                  return (d * 100)+ 'px' ;
          }
);
以網底標示的部份設定每一個建立的p元素其類別為 bar ,套用上述的bar樣式,最後再根據資料設定寬度(width)樣式,將每一筆回傳的資料乘上適當的倍數並加上長度單位px,如此一來可以得到一個簡單的圖表。






沒有留言: