對可視化庫D3.js的應用研究

權慶樂++連衛(wèi)民

摘 要

D3（Data-Driven Documents）是最流行的可視化庫之一，是一個用動態(tài)圖形顯示數(shù)據(jù)的JavaScript庫，一個數(shù)據(jù)可視化的工具。通過D3.js實現(xiàn)數(shù)據(jù)的可視化，可以分為下面幾個步驟。首先是將數(shù)據(jù)加載到瀏覽器的內(nèi)存空間中，然后把加載的數(shù)據(jù)綁定到文檔中的元素，并根據(jù)需要創(chuàng)建新的元素，接著解析每個元素的范圍資料并為其設置相應的可視化屬性，實現(xiàn)元素的變換，最后響應用戶輸入實現(xiàn)元素狀態(tài)的過渡，以圖形的形式將數(shù)據(jù)可視化的結果展示在瀏覽器上。

【關鍵詞】D3 數(shù)據(jù)可視化 DOM

1 D3.js的基本特性

D3是縮寫，它的全稱是Data-Driven Documents（數(shù)據(jù)驅(qū)動文檔），是基于數(shù)據(jù)的文檔操作JavaScript庫。D3能夠把數(shù)據(jù)和HTML、SVG、CSS結合起來，創(chuàng)造出可交互的數(shù)據(jù)圖表。其中，數(shù)據(jù)來源自作者，文檔代表基于Web的文檔（或網(wǎng)頁），也就是可以在瀏覽器中展現(xiàn)的一切，比如，HTML、SVG等，而D3相當于是扮演了一個驅(qū)動程序的角色，將數(shù)據(jù)和文檔聯(lián)系起來。

D3.js采用的是鏈式語法，非常方便于對庫中函數(shù)方法的引用。

例如：d3.select（"body"）.append（"p"）.text（"New"）； //為p元素添加文字內(nèi)容

數(shù)據(jù)的可視化可以讓數(shù)據(jù)分析的結果更加直觀，便于發(fā)覺隱含內(nèi)容D3結合功能強大的可視化組件和數(shù)據(jù)驅(qū)動的方法對DOM進行操作，可以將任意數(shù)據(jù)綁定到文檔對象模型（DOM）。 支持的數(shù)據(jù)格式有常見的：txt、html、json、html、xml、csv等。

D3 不隱藏你的原始數(shù)據(jù)。D3 代碼在客戶端執(zhí)行（也就是在用戶瀏覽器，而不是 Web 服務器中執(zhí)行），因此你想要可視化的數(shù)據(jù)必須發(fā)送到客戶端。可視化的目的就是為了更好地表現(xiàn)數(shù)據(jù)。

D3不是一個整體框架，旨在提供每一個可以想象的特征。相反，D3解決問題的關鍵在于：基于數(shù)據(jù)文件的有效操作。這避免了專有的表示提供了非凡的靈活性，使Web標準如CSS3的全部功能，HTML5和SVG。以最小的開銷、非常快的速度，支持大型數(shù)據(jù)集和互動的動態(tài)可視化行為。

2 D3可視化特性在電力數(shù)據(jù)可視化中的應用

2.1 電力機組數(shù)據(jù)的可視化研究

通過D3.js實現(xiàn)數(shù)據(jù)的可視化，可以分為下面幾個步驟。

首先是將數(shù)據(jù)加載到瀏覽器的內(nèi)存空間中，在本文研究的應用實例中就是把時間和頻率兩組數(shù)據(jù)電力機組的數(shù)據(jù)庫中接收并加載到瀏覽器的內(nèi)存空間中。

例如d3.json（'http：//localhost：8888/selectInterval？qs='+start+'&js='+end+'&bm='+table+'&

xvalue='+time+'&yvalue='+value，function（json） {}）；

然后把加載的數(shù)據(jù)綁定到文檔中的元素，并根據(jù)需要創(chuàng)建新的元素，具體到本文實例中也就是將時間和頻率兩組數(shù)據(jù)綁定到最終網(wǎng)頁顯示中的可視化圖表結果中，也就是分別映射到可視化圖表的X軸和Y軸，整個網(wǎng)頁中的元素可以分為兩類，一類是可視化圖表中的元素，主要包括X、Y軸及其值域、坐標軸區(qū)域網(wǎng)格化顯示和可視化圖表中折線的屬性（線寬、顏色等），這些元素都是為了使最終顯示的結果更清晰明了；另一類是參數(shù)部分，主要包括畫布寬度、高度（以像素為單位），用來控制數(shù)據(jù)可視化顯示區(qū)域的大小，也包括起始時間、終止時間、表名、畫布數(shù)據(jù)量、X軸字段、Y軸字段等，用來決定從哪里加載數(shù)據(jù)、加載哪些數(shù)據(jù)以及可視化區(qū)域中一次顯示數(shù)據(jù)的多少，還包括Y軸上限和Y軸下限等，用來控制Y軸的值域區(qū)間，更有助于使數(shù)據(jù)的可視化展示能更好的反映出數(shù)據(jù)變化的情況。

2.2 應用結果分析

圖1所示是基于D3.js對一電力機組在某一時間區(qū)間內(nèi)的frequency（頻率值）實現(xiàn)數(shù)據(jù)可視化后的結果截圖，其中橫軸是時間，縱軸是相應的頻率值。在實例中通過D3實現(xiàn)對數(shù)據(jù)的可視化，清晰的展現(xiàn)出數(shù)據(jù)的分布情況，可以方便觀察數(shù)據(jù)，快捷的辨別出某一時間區(qū)間內(nèi)電力機組的工作頻率是否在正常工作的頻率范圍內(nèi)。

3 基于D3的數(shù)據(jù)可視化

本文通過對電力機組工作數(shù)據(jù)的可視化研究，比較深入的了解了D3.js的特性、不足和工作機制。根據(jù)應用實例研究結果，可以知道D3是一個很好的數(shù)據(jù)可視化工具，它支持多種數(shù)據(jù)格式，例如txt、html、json、html、xml、csv等，同時結合功能強大的可視化組件和數(shù)據(jù)驅(qū)動的方法進行操作，以最小的開銷、非常快的速度，實現(xiàn)數(shù)據(jù)可視化的目標。

參考文獻

[1]Scott Murray著，李松峰譯.數(shù)據(jù)可視化實戰(zhàn)[M].北京：人民郵電出版社，2013（06）.

[2]周愛民著.JavaScript語言精髓與實踐[M].北京：電子工業(yè)出版社，2012（03）.

[3]尼古拉斯.澤卡斯（Nicholas C.Zakas）著.JavaScript高級程序設計[M].北京：人民郵電出版社，2010（07）.

作者單位

河南牧業(yè)經(jīng)濟學院 河南省鄭州市 450044endprint

摘 要

D3（Data-Driven Documents）是最流行的可視化庫之一，是一個用動態(tài)圖形顯示數(shù)據(jù)的JavaScript庫，一個數(shù)據(jù)可視化的工具。通過D3.js實現(xiàn)數(shù)據(jù)的可視化，可以分為下面幾個步驟。首先是將數(shù)據(jù)加載到瀏覽器的內(nèi)存空間中，然后把加載的數(shù)據(jù)綁定到文檔中的元素，并根據(jù)需要創(chuàng)建新的元素，接著解析每個元素的范圍資料并為其設置相應的可視化屬性，實現(xiàn)元素的變換，最后響應用戶輸入實現(xiàn)元素狀態(tài)的過渡，以圖形的形式將數(shù)據(jù)可視化的結果展示在瀏覽器上。

【關鍵詞】D3 數(shù)據(jù)可視化 DOM

1 D3.js的基本特性

D3是縮寫，它的全稱是Data-Driven Documents（數(shù)據(jù)驅(qū)動文檔），是基于數(shù)據(jù)的文檔操作JavaScript庫。D3能夠把數(shù)據(jù)和HTML、SVG、CSS結合起來，創(chuàng)造出可交互的數(shù)據(jù)圖表。其中，數(shù)據(jù)來源自作者，文檔代表基于Web的文檔（或網(wǎng)頁），也就是可以在瀏覽器中展現(xiàn)的一切，比如，HTML、SVG等，而D3相當于是扮演了一個驅(qū)動程序的角色，將數(shù)據(jù)和文檔聯(lián)系起來。

D3.js采用的是鏈式語法，非常方便于對庫中函數(shù)方法的引用。

例如：d3.select（"body"）.append（"p"）.text（"New"）； //為p元素添加文字內(nèi)容

數(shù)據(jù)的可視化可以讓數(shù)據(jù)分析的結果更加直觀，便于發(fā)覺隱含內(nèi)容D3結合功能強大的可視化組件和數(shù)據(jù)驅(qū)動的方法對DOM進行操作，可以將任意數(shù)據(jù)綁定到文檔對象模型（DOM）。 支持的數(shù)據(jù)格式有常見的：txt、html、json、html、xml、csv等。

D3 不隱藏你的原始數(shù)據(jù)。D3 代碼在客戶端執(zhí)行（也就是在用戶瀏覽器，而不是 Web 服務器中執(zhí)行），因此你想要可視化的數(shù)據(jù)必須發(fā)送到客戶端。可視化的目的就是為了更好地表現(xiàn)數(shù)據(jù)。

D3不是一個整體框架，旨在提供每一個可以想象的特征。相反，D3解決問題的關鍵在于：基于數(shù)據(jù)文件的有效操作。這避免了專有的表示提供了非凡的靈活性，使Web標準如CSS3的全部功能，HTML5和SVG。以最小的開銷、非常快的速度，支持大型數(shù)據(jù)集和互動的動態(tài)可視化行為。

2 D3可視化特性在電力數(shù)據(jù)可視化中的應用

2.1 電力機組數(shù)據(jù)的可視化研究

通過D3.js實現(xiàn)數(shù)據(jù)的可視化，可以分為下面幾個步驟。

首先是將數(shù)據(jù)加載到瀏覽器的內(nèi)存空間中，在本文研究的應用實例中就是把時間和頻率兩組數(shù)據(jù)電力機組的數(shù)據(jù)庫中接收并加載到瀏覽器的內(nèi)存空間中。

例如d3.json（'http：//localhost：8888/selectInterval？qs='+start+'&js='+end+'&bm='+table+'&

xvalue='+time+'&yvalue='+value，function（json） {}）；

然后把加載的數(shù)據(jù)綁定到文檔中的元素，并根據(jù)需要創(chuàng)建新的元素，具體到本文實例中也就是將時間和頻率兩組數(shù)據(jù)綁定到最終網(wǎng)頁顯示中的可視化圖表結果中，也就是分別映射到可視化圖表的X軸和Y軸，整個網(wǎng)頁中的元素可以分為兩類，一類是可視化圖表中的元素，主要包括X、Y軸及其值域、坐標軸區(qū)域網(wǎng)格化顯示和可視化圖表中折線的屬性（線寬、顏色等），這些元素都是為了使最終顯示的結果更清晰明了；另一類是參數(shù)部分，主要包括畫布寬度、高度（以像素為單位），用來控制數(shù)據(jù)可視化顯示區(qū)域的大小，也包括起始時間、終止時間、表名、畫布數(shù)據(jù)量、X軸字段、Y軸字段等，用來決定從哪里加載數(shù)據(jù)、加載哪些數(shù)據(jù)以及可視化區(qū)域中一次顯示數(shù)據(jù)的多少，還包括Y軸上限和Y軸下限等，用來控制Y軸的值域區(qū)間，更有助于使數(shù)據(jù)的可視化展示能更好的反映出數(shù)據(jù)變化的情況。

2.2 應用結果分析

圖1所示是基于D3.js對一電力機組在某一時間區(qū)間內(nèi)的frequency（頻率值）實現(xiàn)數(shù)據(jù)可視化后的結果截圖，其中橫軸是時間，縱軸是相應的頻率值。在實例中通過D3實現(xiàn)對數(shù)據(jù)的可視化，清晰的展現(xiàn)出數(shù)據(jù)的分布情況，可以方便觀察數(shù)據(jù)，快捷的辨別出某一時間區(qū)間內(nèi)電力機組的工作頻率是否在正常工作的頻率范圍內(nèi)。

3 基于D3的數(shù)據(jù)可視化

本文通過對電力機組工作數(shù)據(jù)的可視化研究，比較深入的了解了D3.js的特性、不足和工作機制。根據(jù)應用實例研究結果，可以知道D3是一個很好的數(shù)據(jù)可視化工具，它支持多種數(shù)據(jù)格式，例如txt、html、json、html、xml、csv等，同時結合功能強大的可視化組件和數(shù)據(jù)驅(qū)動的方法進行操作，以最小的開銷、非常快的速度，實現(xiàn)數(shù)據(jù)可視化的目標。

參考文獻

[1]Scott Murray著，李松峰譯.數(shù)據(jù)可視化實戰(zhàn)[M].北京：人民郵電出版社，2013（06）.

[2]周愛民著.JavaScript語言精髓與實踐[M].北京：電子工業(yè)出版社，2012（03）.

[3]尼古拉斯.澤卡斯（Nicholas C.Zakas）著.JavaScript高級程序設計[M].北京：人民郵電出版社，2010（07）.

作者單位

河南牧業(yè)經(jīng)濟學院 河南省鄭州市 450044endprint

摘 要

D3（Data-Driven Documents）是最流行的可視化庫之一，是一個用動態(tài)圖形顯示數(shù)據(jù)的JavaScript庫，一個數(shù)據(jù)可視化的工具。通過D3.js實現(xiàn)數(shù)據(jù)的可視化，可以分為下面幾個步驟。首先是將數(shù)據(jù)加載到瀏覽器的內(nèi)存空間中，然后把加載的數(shù)據(jù)綁定到文檔中的元素，并根據(jù)需要創(chuàng)建新的元素，接著解析每個元素的范圍資料并為其設置相應的可視化屬性，實現(xiàn)元素的變換，最后響應用戶輸入實現(xiàn)元素狀態(tài)的過渡，以圖形的形式將數(shù)據(jù)可視化的結果展示在瀏覽器上。

【關鍵詞】D3 數(shù)據(jù)可視化 DOM

1 D3.js的基本特性

D3是縮寫，它的全稱是Data-Driven Documents（數(shù)據(jù)驅(qū)動文檔），是基于數(shù)據(jù)的文檔操作JavaScript庫。D3能夠把數(shù)據(jù)和HTML、SVG、CSS結合起來，創(chuàng)造出可交互的數(shù)據(jù)圖表。其中，數(shù)據(jù)來源自作者，文檔代表基于Web的文檔（或網(wǎng)頁），也就是可以在瀏覽器中展現(xiàn)的一切，比如，HTML、SVG等，而D3相當于是扮演了一個驅(qū)動程序的角色，將數(shù)據(jù)和文檔聯(lián)系起來。

D3.js采用的是鏈式語法，非常方便于對庫中函數(shù)方法的引用。

例如：d3.select（"body"）.append（"p"）.text（"New"）； //為p元素添加文字內(nèi)容

數(shù)據(jù)的可視化可以讓數(shù)據(jù)分析的結果更加直觀，便于發(fā)覺隱含內(nèi)容D3結合功能強大的可視化組件和數(shù)據(jù)驅(qū)動的方法對DOM進行操作，可以將任意數(shù)據(jù)綁定到文檔對象模型（DOM）。 支持的數(shù)據(jù)格式有常見的：txt、html、json、html、xml、csv等。

D3 不隱藏你的原始數(shù)據(jù)。D3 代碼在客戶端執(zhí)行（也就是在用戶瀏覽器，而不是 Web 服務器中執(zhí)行），因此你想要可視化的數(shù)據(jù)必須發(fā)送到客戶端。可視化的目的就是為了更好地表現(xiàn)數(shù)據(jù)。

D3不是一個整體框架，旨在提供每一個可以想象的特征。相反，D3解決問題的關鍵在于：基于數(shù)據(jù)文件的有效操作。這避免了專有的表示提供了非凡的靈活性，使Web標準如CSS3的全部功能，HTML5和SVG。以最小的開銷、非常快的速度，支持大型數(shù)據(jù)集和互動的動態(tài)可視化行為。

2 D3可視化特性在電力數(shù)據(jù)可視化中的應用

2.1 電力機組數(shù)據(jù)的可視化研究

通過D3.js實現(xiàn)數(shù)據(jù)的可視化，可以分為下面幾個步驟。

首先是將數(shù)據(jù)加載到瀏覽器的內(nèi)存空間中，在本文研究的應用實例中就是把時間和頻率兩組數(shù)據(jù)電力機組的數(shù)據(jù)庫中接收并加載到瀏覽器的內(nèi)存空間中。

例如d3.json（'http：//localhost：8888/selectInterval？qs='+start+'&js='+end+'&bm='+table+'&

xvalue='+time+'&yvalue='+value，function（json） {}）；

然后把加載的數(shù)據(jù)綁定到文檔中的元素，并根據(jù)需要創(chuàng)建新的元素，具體到本文實例中也就是將時間和頻率兩組數(shù)據(jù)綁定到最終網(wǎng)頁顯示中的可視化圖表結果中，也就是分別映射到可視化圖表的X軸和Y軸，整個網(wǎng)頁中的元素可以分為兩類，一類是可視化圖表中的元素，主要包括X、Y軸及其值域、坐標軸區(qū)域網(wǎng)格化顯示和可視化圖表中折線的屬性（線寬、顏色等），這些元素都是為了使最終顯示的結果更清晰明了；另一類是參數(shù)部分，主要包括畫布寬度、高度（以像素為單位），用來控制數(shù)據(jù)可視化顯示區(qū)域的大小，也包括起始時間、終止時間、表名、畫布數(shù)據(jù)量、X軸字段、Y軸字段等，用來決定從哪里加載數(shù)據(jù)、加載哪些數(shù)據(jù)以及可視化區(qū)域中一次顯示數(shù)據(jù)的多少，還包括Y軸上限和Y軸下限等，用來控制Y軸的值域區(qū)間，更有助于使數(shù)據(jù)的可視化展示能更好的反映出數(shù)據(jù)變化的情況。

2.2 應用結果分析

圖1所示是基于D3.js對一電力機組在某一時間區(qū)間內(nèi)的frequency（頻率值）實現(xiàn)數(shù)據(jù)可視化后的結果截圖，其中橫軸是時間，縱軸是相應的頻率值。在實例中通過D3實現(xiàn)對數(shù)據(jù)的可視化，清晰的展現(xiàn)出數(shù)據(jù)的分布情況，可以方便觀察數(shù)據(jù)，快捷的辨別出某一時間區(qū)間內(nèi)電力機組的工作頻率是否在正常工作的頻率范圍內(nèi)。

3 基于D3的數(shù)據(jù)可視化

本文通過對電力機組工作數(shù)據(jù)的可視化研究，比較深入的了解了D3.js的特性、不足和工作機制。根據(jù)應用實例研究結果，可以知道D3是一個很好的數(shù)據(jù)可視化工具，它支持多種數(shù)據(jù)格式，例如txt、html、json、html、xml、csv等，同時結合功能強大的可視化組件和數(shù)據(jù)驅(qū)動的方法進行操作，以最小的開銷、非常快的速度，實現(xiàn)數(shù)據(jù)可視化的目標。

參考文獻

[1]Scott Murray著，李松峰譯.數(shù)據(jù)可視化實戰(zhàn)[M].北京：人民郵電出版社，2013（06）.

[2]周愛民著.JavaScript語言精髓與實踐[M].北京：電子工業(yè)出版社，2012（03）.

[3]尼古拉斯.澤卡斯（Nicholas C.Zakas）著.JavaScript高級程序設計[M].北京：人民郵電出版社，2010（07）.

作者單位

河南牧業(yè)經(jīng)濟學院 河南省鄭州市 450044endprint