D3 入門概念 - 開始使用D3

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

D3 是一套 JavaScript 函式庫,以資料為導向進行文件內容的維護處理,當你需要將一群資料轉化成網頁文件內容,可以考慮透過 D3 進行實作降低JavaScript的複雜度。

D3 採用了大量的鏈結語法,結合回呼函式進行資料處理並根據回傳的資料進一步控制網頁內容,因此在使用D3之前,必須對JavaScript語法與DOM有足夠的認識與理解。

運用D3 有兩個部份首先必須理解 - 鏈結語法以及動態屬性函式。首先考慮以下的網頁標籤配置:
<div>
    <h2>康廷數位出版</h2>
    <p class="d3p">商業級 ASP.NET MVC 樣式與架構實務</p>
    <p class="d3p">Web 前端開發完全入門</p>
    <p>C 語言入門精要</p>
    <div>Entity Framework 實務精要</div>
</div>
假設要調整其中 p 元素 class="d3p" 的字型,利用傳統的 DOM API 所需的程式碼如下:
var ps = document.getElementsByClassName('d3p');
for (var key in ps) {
    ps[key].style.setProperty("color", "blue", null);
}
調用getElementsByClassName(),利用類別名稱將要調整字型的p元素找出來,然後透過迴圈逐一設定其 style 樣式。

在輸出結果當中,由於後兩個 P 元素並不屬於 d3p 類別,因此維持原來的字體顏色,前兩個 p 元素則以藍色(blue)輸出。

鏈結語法

以 JavaScript 來處理 DOM 是相當麻煩的過程,現在來看 D3 的寫法:
d3.selectAll('.d3p').style('color', 'blue');
這是一段典型的 D3 鏈結語法,selectAll() 表示取出選擇器為 .d3p 的元素,然後逐一將引用 style 設定,設定 color 樣式為 blue。

d3.selectAll() 可以找出所有符合條件的元素,如果你只是要找到第一個,只要調用d3.select() 再將條件參數傳入即可,例如修改如下:
d3.select('.d3p').style('color', 'blue');
這一行程式碼將只會以藍色輸出第一行的字串「商業級 ASP.NET MVC 樣式與架構實務」,也就是符合 d3p 類別名稱的第一個元素。

另外再看一個例子,假設要將網頁中所有p元素的內容設定成某個特別的字串,只需以下的語法:
d3.selectAll('p').text('Hello D3 !');
其中的 text 表示要將指定的文字「Hello D3 !」嵌入 selectAll 找到的所有 P 元素當中,如此一來所有三行是 p 的元素都會輸出「Hello D3 !」。

鏈結語法支援一組以上的屬性設定,例如以下這一行配置:
d3.selectAll('.d3p').style('color', 'blue').text('Hello D3 !');
selectAll 取得所有 class 屬性值等於 d3p 的元素,然後透過 style ,將樣式 color 設為 blue,最後將其配置文字改成「Hello D3!」,經過這一行設定,所有的 class 屬性值是 d3p 的元素,都以藍色的「Hello D3!」的文字呈現。

動態屬性函式

除了鏈結語法,D3另外接受動態屬性,我們可以在網頁執行的過程中,透過預先寫好的函式動態載入要處理的即時資料內容,這對於需要程式化控制的動態內容處理相當有用。考慮以下另外一個網頁配置:
<div style="font-size:2em">
今天星期:<span id="day"></span>
</div>
其中的內容必須透過程式取得今天是星期幾,並且以不同的顏色呈現,由於只有在網頁載入時才能確認輸出值,因此透過動態屬性支援的函式語法進行實作。
var color = ['red', 'orange', 'yellow','green', 'blue', 'cyan', 'purple', ];

d3.select('#day').style('color', function () {            
            return color[(new Date()).getDay()];
}).text(function () {
            return (new Date()).getDay();
});
將要測試的顏色名稱儲存在陣列中方便讀取,接下來的鏈結語法首先取得透過 id名稱day取得 SPAN 元素,設定其 style 樣式,因為樣式名稱必須根據取得的結果進行顏色的設定,因此除了第一個參數指定為 color ,第二個參數指定為 function ,如此一來可以在其中撰寫程式碼,來動態取得需要的值。

在這個函式中,取得網頁載入當天代表的數字,這個數字會被當作索引值傳入 color 陣列,取出對應的顏色值,以  return  回傳成為 color 樣式值。

接下來的 text() 原理相同。

D3 鏈結語法搭配動態屬性設計,透過精簡的語法設計支援複雜的 DOM 維護作業,對於網頁端的資料視覺化處理相當有用。




沒有留言: