對(duì)可視化庫(kù)D3.js的應(yīng)用研究

權(quán)慶樂(lè)++連衛(wèi)民

摘 要

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

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

1 D3.js的基本特性

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

D3.js采用的是鏈?zhǔn)秸Z(yǔ)法，非常方便于對(duì)庫(kù)中函數(shù)方法的引用。

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

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

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

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

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

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

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

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

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

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

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

2.2 應(yīng)用結(jié)果分析

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

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

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

參考文獻(xiàn)

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

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

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

作者單位

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

摘 要

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

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

1 D3.js的基本特性

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

D3.js采用的是鏈?zhǔn)秸Z(yǔ)法，非常方便于對(duì)庫(kù)中函數(shù)方法的引用。

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

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

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

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

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

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

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

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

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

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

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

2.2 應(yīng)用結(jié)果分析

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

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

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

參考文獻(xiàn)

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

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

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

作者單位

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

摘 要

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

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

1 D3.js的基本特性

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

D3.js采用的是鏈?zhǔn)秸Z(yǔ)法，非常方便于對(duì)庫(kù)中函數(shù)方法的引用。

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

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

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

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

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

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

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

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

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

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

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

2.2 應(yīng)用結(jié)果分析

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

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

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

參考文獻(xiàn)

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

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

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

作者單位

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