使用JavaScript和D3.js實現數據可視化

時間 2019-11-08

標籤使用 javascript d3.js 實現數據可視化欄目 JavaScript 简体版

原文原文鏈接

歡迎你們前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~javascript

本文由獨木橋先生發表於雲+社區專欄

介紹

D3.js是一個JavaScript庫。它的全稱是Data-Driven Documents（數據驅動文檔），而且它被稱爲一個互動和動態的數據可視化庫網絡。2011年2月首次發佈，在撰寫本文時，最新的穩定版本是4.4版本，而且不斷更新。D3利用可縮放矢量圖形或SVG格式，容許您渲染可放大或縮小的形狀，線條和填充，而不會下降質量。本教程將指導您使用JavaScript D3庫建立條形圖。css

準備

爲了充分利用本教程，您應該熟悉JavaScript編程語言以及CSS和HTML的知識。html

儘管你將使用CSS來進行D3的樣式設定，但值得注意的是，不少在HTML上使用的標準的CSS在SVG的使用方式會不同-也就是說，你會用stroke，而不是border，使用fill而不是color。前端

咱們將使用文本編輯器和Web瀏覽器。出於測試目的，建議使用工具來檢查和調試JavaScript、HTML和CSS，例如Firefox Developer Tools或Chrome DevTools。java

第一步 - 建立文件和參考D3

讓咱們首先建立一個目錄來保存咱們全部的文件。您能夠隨意調用它，咱們將其稱爲D3項目。建立後，進入目錄。git

mkdir D3-project
cd D3-project

要使用D3的功能，您必須在網頁中包含d3.js文件。它長約16,000行，大小約500kb。github

讓咱們用curl來將文件下載到咱們的目錄中。chrome

要下載最適合包含項目的壓縮版本，請輸入：編程

curl https://d3js.org/d3.v4.min.js --output d3.min.js

若是您打算閱讀D3代碼，最好經過輸入如下內容來得到未壓縮版本：json

curl https://d3js.org/d3.v4.js --output d3.js

咱們將在本教程中使用d3.min.js文件，請在HTML文件中引用d3.js。

因爲D3是模塊化的，您能夠經過僅拉入您將使用的模塊來減少文件大小。

下載D3後，讓咱們設置CSS和HTML文件。您能夠選擇要在此文件上使用的文本編輯器，例如nano。咱們將從CSS文件style.css開始，以便咱們能夠當即從HTML文件連接到它。

nano style.css

咱們將從一個標準的CSS聲明開始，將頁面設置爲100％高度且無邊距。

html, body {
  margin: 0;
  height: 100%;
}

您如今能夠保存並關閉CSS文件。

接下來咱們將建立咱們的JavaScript文件，咱們將其命名barchart.js，咱們將爲此示例製做條形圖。使用touch命令建立文件，暫時不編輯。

touch barchart.js

如今，讓咱們將全部這些元素鏈接到一個HTML文件，咱們將其稱之爲barchart.html：

nano barchart.html

咱們能夠像大多數其餘HTML文件同樣設置此文件，在其中咱們將引用咱們剛建立的style.css文件、barchart.js文件和腳本d3.min.js。編輯barchart.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bar Chart</title>
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- Alternatively use d3.js here -->
    <script type="text/javascript" src="d3.min.js"></script>

  </head>

  <body>
    <script type="text/javascript" src="barchart.js"></script>
  </body>
</html>

保存並關閉。

第二步 - 在JavaScript中設置SVG

咱們如今可使用咱們選擇的文本編輯器打開文件barchart.js：

nano barchart.js

讓咱們首先添加一個數字數組，咱們將其用做條形圖的基礎，編輯barchart.js：

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

接下來，咱們須要建立SVG元素。這是咱們存儲全部圖形的地方。在D3中，咱們用d3.select來讓瀏覽器搜索元素。

咱們可使用d3.select("body").append("svg");執行此操做。編輯barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg");

若是咱們如今加載barchart.html到咱們的Web瀏覽器中，咱們應該可以使用咱們的開發人員工具檢查DOM或文檔對象模型，並將鼠標懸停在SVG框上。

回到咱們的JavaScript文件中，咱們能夠將屬性連接到SVG，使其成爲網頁的完整高度和寬度。咱們將.attr()用於屬性。爲了讓它更具可讀性。確保將分號向下移動到變量聲明的末尾。編輯barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
          .attr("height","100%")
          .attr("width","100%");

若是您在瀏覽器中從新加載頁面，則應該會在鼠標懸停DOM時看到一個佔據整個屏幕的矩形。

第三步 - 添加矩形

隨着咱們的SVG準備就緒，咱們能夠開始將咱們數據集的矩形添加到JavaScript文件中，編輯barchart.js。

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
          .attr("height","100%")
          .attr("width","100%");

svg.selectAll("rect")
    .data(dataArray)
    .enter().append("rect");

與上面的d3.select同樣，讓瀏覽器搜索元素。這一次，它是一個矩形陣列。由於它是一個數組，咱們使用d3.selectAll和d3.selectAll("rect")，由於它是一個矩形數組。若是瀏覽器找到矩形，它將在選擇中返回它們，若是它是空的，它將返回空。使用D3，您必須首先選擇您要處理的元素。

咱們配合這個矩形用.data(dataArray)陣列存儲在dataArray的數據。

要爲選擇中的每一個項目（對應於數據數組）實際添加一個矩形，咱們還將添加.enter().append("rect");以附加矩形。在此示例中，將有9個矩形對應於陣列中的9個數字。

若是您如今從新加載頁面，您將看不到任何矩形，但若是您檢查DOM，您將看到在那裏定義的9個矩形。

咱們尚未爲矩形設置屬性以使它們可見，因此如今添加它們。

設置形狀的屬性

咱們能夠經過使用.attr()，與爲SVG定義屬性相同的方式向形狀添加屬性。D3中的每一個形狀將具備不一樣的屬性，具體取決於它們的定義和繪製方式。

咱們的矩形將包含4個屬性：

("height", "height_in_pixels") 對應矩形的高度
("width", "width_in_pixels")對應矩形的寬度
("x", "distance_in_pixels")表明與瀏覽器窗口左側的距離
("y", "distance_in_pixels")表明與瀏覽器窗口頂部的距離

所以，若是咱們想要長度爲250像素，寬40像素，距離瀏覽器左側25像素，距離頂部50像素的矩形，咱們將編寫以下代碼：

var svg = d3.select("body").append("svg")
          .attr("height","100%")
          .attr("width","100%");

svg.selectAll("rect")
    .data(dataArray)
    .enter().append("rect")
          .attr("height","250")
          .attr("width","40")
          .attr("x","25")
          .attr("y","50");

若是咱們刷新瀏覽器，咱們會看到全部矩形重疊：

默認狀況下，D3中的形狀填充爲黑色，但咱們能夠稍後修改，由於咱們須要首先解決矩形的定位和大小。

使矩形反映數據

目前，咱們陣列中的全部矩形沿X軸具備相同的位置，而且不表明高度方面的數據。要修改矩形的位置和大小，咱們須要爲咱們的一些屬性引入函數。添加函數將使值成爲動態而非手動。讓咱們從修改x屬性開始。目前，該行代碼以下所示：

.attr("x","25")

咱們將用一個函數替換25像素的數字。咱們將傳遞由D3定義的兩個變量function()，表明數據點和索引。索引告訴咱們數組中數據點的位置。d用於數據點和i索引的慣例，例如function(d,i)，但您可使用您想要的任何變量。

JavaScript將迭代d和i。讓咱們爲它迭代的每一個索引添加間距，以便每一個矩形間隔開。爲此，咱們能夠將索引乘以i必定數量的像素。咱們如今將使用60，但您能夠決定哪一種間距適合您。咱們新的X軸屬性行如今看起來像這樣：

.attr("x", function(d, i) {return i * 60;})

可是，若是咱們如今運行代碼，咱們會看到矩形在瀏覽器的左側齊平，因此讓咱們在那裏添加一些額外的間距，好比距邊緣25個像素。如今咱們的完整代碼應以下所示：

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
          .attr("height","100%")
          .attr("width","100%");

svg.selectAll("rect")
    .data(dataArray)
    .enter().append("rect")
          .attr("height","250")
          .attr("width","40")
          .attr("x", function(d, i) {return (i * 60) + 25})
          .attr("y","50");

若是咱們此時刷新瀏覽器，咱們會看到以下所示的內容：

如今咱們有沿X軸間隔開的矩形，表明咱們陣列中的每一個項目。接下來，讓矩形的高度反映數組中的數據。

咱們如今將使用該height屬性，並將添加一個相似於咱們添加到x屬性中的函數。讓咱們經過傳遞變量開始d和i到function，並返回d。d表明數據點。

.attr("height", function(d, i) {return (d)})

若是你如今運行代碼，你會注意到兩件事。首先，矩形至關小，其次是它們附着在圖表的頂部而不是底部。

爲了解決矩形的小尺寸，讓咱們乘以d返回的：

.attr("height", function(d, i) {return (d * 10)})

如今矩形的大小更大，但它們仍然從上到下顯示。瀏覽器一般從左上角到右下角閱讀網頁，而咱們從下到上閱讀條形圖。要從新定位矩形，咱們將修改y屬性以減去頂部的空間。

再次，咱們將使用function(d,i)，而且咱們將返回一個高於咱們條形圖最高值的Y值，比方說400。咱們將從400減去返回的高度(d * 10)，以便咱們的行如今看起來像這樣：

.attr("y", function(d, i) {return 400 - (d * 10)});

咱們來看看咱們的完整JavaScript代碼：

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
          .attr("height","100%")
          .attr("width","100%");

svg.selectAll("rect")
    .data(dataArray)
    .enter().append("rect")
          .attr("height", function(d, i) {return (d * 10)})
          .attr("width","40")
          .attr("x", function(d, i) {return (i * 60) + 25})
          .attr("y", function(d, i) {return 400 - (d * 10)});

此時，當咱們從新加載頁面時，咱們會看到一個條形圖，咱們能夠從下到上閱讀：

如今，咱們能夠設計圖表的樣式。

第四步 - 使用D3設置樣式

咱們將使用咱們的CSS文件來設計咱們的D3形狀，但首先，爲了使這項工做更容易，咱們將在JavaScript文件中爲咱們的矩形提供一個類名，咱們能夠在CSS文件中引用它。

添加類就像使用點表示法添加任何其餘屬性同樣。咱們稱之爲班級bar，由於它是一個條形圖，但只要全部引用都引用相同的名稱，咱們就能夠調用它。咱們的語法以下所示：

.attr("class", "bar")

咱們能夠在任何地方添加此屬性。將它保留爲第一個屬性可使咱們的CSS文件更容易引用。

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
          .attr("height","100%")
          .attr("width","100%");

svg.selectAll("rect")
    .data(dataArray)
    .enter().append("rect")
          .attr("class", "bar")
          .attr("height", function(d, i) {return (d * 10)})
          .attr("width","40")
          .attr("x", function(d, i) {return (i * 60) + 25})
          .attr("y", function(d, i) {return 400 - (d * 10)});

如今，讓咱們切換到咱們的style.css文件，目前看起來像這樣：

html, body {
  margin: 0;
  height: 100%
}

咱們能夠經過更改填充顏色來開始修改矩形，引用咱們剛剛建立的bar類別：

style.css
html, body {
  margin: 0;
  height: 100%
}

.bar {
  fill: blue
}

在這裏，咱們將矩形設爲藍色，咱們也能夠爲它們分配一個十六進制顏色代碼，以下所示：

.bar {
  fill: #0080FF
}

此時，咱們的矩形看起來像這樣：

咱們能夠爲矩形提供其餘值，例如用stroke以特定顏色勾勒出矩形，以及stroke-width：

html, body {
  margin: 0;
  height: 100%
}

.bar {
  fill: #0080FF;
  stroke: black;
  stroke-width: 5
}

這將爲咱們的矩形提供寬度爲5像素的黑色輪廓。

此外，咱們能夠經過在鼠標懸停時添加條形顏色樣式來爲咱們的圖表添加一些交互性：

.bar:hover {
  fill: red
}

如今，當咱們將鼠標懸停在其中一個矩形上時，該特定矩形將變爲紅色：

或者，您能夠經過添加其餘屬性來設置JavaScript文件中的形狀樣式。在矩形塊中，咱們將像其餘.attr()屬性同樣編寫這些。所以，在矩形周圍添加黑色筆劃將被寫爲.attr("stroke", "black")。咱們還要添加stroke-width個像素，並確保將分號向下移動。

...
svg.selectAll("rect")
    .data(dataArray)
    .enter().append("rect")
          .attr("class", "bar")
          .attr("height", function(d, i) {return (d * 10)})
          .attr("width","40")
          .attr("x", function(d, i) {return (i * 60) + 25})
          .attr("y", function(d, i) {return 400 - (d * 10)})
          .attr("stroke", "black")
          .attr("stroke-width", "5");

您能夠選擇如何決定樣式和文件樣式。在這個例子中，咱們將在style.css文件中操做，並將其限制爲填充顏色和懸停填充：

html, body {
  margin: 0;
  height: 100%
}

.bar {
  fill: #0080FF
}

.bar:hover {
  fill: #003366
}

在網絡上處理顏色時，重要的是要牢記您的觀衆並努力包含儘量廣泛可訪問的顏色。

第五步 - 添加標籤

咱們的最後一步是以標籤的形式在咱們的圖表中添加一些可量化的標記。這些標籤將對應於咱們陣列中的數字。

添加文本相似於添加上面咱們所作的矩形形狀。咱們須要選擇文本，而後將其附加到SVG。咱們還將它與咱們建立的dataArray聯繫起來。咱們將使用"text"，而不是"rect"，但通常格式和咱們在上面添加矩形所作的相似。咱們將這些行添加到barchart.js文件的底部。

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
          .attr("height","100%")
          .attr("width","100%");

svg.selectAll("rect")
    .data(dataArray)
    .enter().append("rect")
          .attr("class", "bar")
          .attr("height", function(d, i) {return (d * 10)})
          .attr("width","40")
          .attr("x", function(d, i) {return (i * 60) + 25})
          .attr("y", function(d, i) {return 400 - (d * 10)});

svg.selectAll("text")
    .data(dataArray)
    .enter().append("text")
    .text(function(d) {return d;});

當咱們刷新瀏覽器時，咱們不會在頁面上看到任何文字，但咱們會在DOM中再次看到它：

若是將鼠標懸停在DOM中的文本行上，您將看到文本所有位於頁面頂部，其中X和Y等於0.咱們將使用與咱們相同的函數公式修改位置經過添加屬性用於矩形。

...
svg.selectAll("text")
    .data(dataArray)
    .enter().append("text")
    .text(function(d) {return d})
          .attr("x", function(d, i) {return (i * 60) + 25})
          .attr("y", function(d, i) {return 400 - (d * 10)});

如今加載網頁時，您會看到浮動在條形圖上方的數字。

值得注意的是，由於這是SVG而不是圖像，因此您能夠選擇文本，就像在頁面上看到的任何其餘文本同樣。

從這裏開始，您能夠經過修改函數公式來從新定位數字。您可能但願將它們懸浮在條形圖上方，例如：

...
svg.selectAll("text")
    .data(dataArray)
    .enter().append("text")
    .text(function(d) {return d})
          .attr("x", function(d, i) {return (i * 60) + 36})
          .attr("y", function(d, i) {return 390 - (d * 10)});

或者，您能夠經過根據Y軸修改它們的位置，使數字浮動在矩形上。咱們還想讓它更具可讀性，因此讓咱們添加一個咱們能夠從style.css文件中訪問的類。

...
.text {
  fill: white;
  font-family: sans-serif
}

您能夠經過定位和樣式儘量多地修改文本。例如，您可能還想更改style.css文件中的font-size屬性。

完成的代碼和代碼改進

此時，您應該擁有一個在JavaScript的D3庫中呈現的功能完備的條形圖。讓咱們看看咱們全部的代碼文件。

barchart.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bar Chart</title>

    <!-- Reference style.css -->
    <link rel = "stylesheet" type="text/css" href="style.css">

    <!-- Reference minified version of D3 -->
    <script type="text/javascript" src="d3.min.js"></script>
  </head>

  <body>
    <script type="text/javascript" src="barchart.js"></script>
  </body>
</html>

style.css

html, body {
  margin: 0;
  height: 100%
}

/*Rectangle bar class styling*/

.bar {
  fill: #0080FF
}

.bar:hover {
  fill: #003366
}

/*Text class styling*/

.text {
  fill: white;
  font-family: sans-serif
}

barchart.js

// Create data array of values to visualize
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

// Create variable for the SVG
var svg = d3.select("body").append("svg")
          .attr("height","100%")
          .attr("width","100%");

// Select, append to SVG, and add attributes to rectangles for bar chart
svg.selectAll("rect")
    .data(dataArray)
    .enter().append("rect")
          .attr("class", "bar")
          .attr("height", function(d, i) {return (d * 10)})
          .attr("width","40")
          .attr("x", function(d, i) {return (i * 60) + 25})
          .attr("y", function(d, i) {return 400 - (d * 10)});

// Select, append to SVG, and add attributes to text
svg.selectAll("text")
    .data(dataArray)
    .enter().append("text")
    .text(function(d) {return d})
           .attr("class", "text")
           .attr("x", function(d, i) {return (i * 60) + 36})
           .attr("y", function(d, i) {return 415 - (d * 10)});

此代碼徹底正常，但您能夠作不少事情來改進代碼。例如，您能夠利用SVG組元素將SVG元素組合在一塊兒，從而容許您在更少的代碼行中修改文本和矩形。

您還能夠經過不一樣方式訪問數據。咱們使用數組來保存咱們的數據，但您可能但願可視化您已有權訪問的數據，而且它可能比數組中的數據要多得多。D3將容許您使用幾種不一樣的數據文件類型：

HTML
JSON
純文本
CSV（逗號分隔值）
TSV（製表符分隔值）
XML

例如，您能夠在網站的目錄中擁有一個JSON文件，並將其鏈接到JavaScript文件

d3.json("myData.json", function(json) {
// code for D3 charts in here
});

您還能夠將D3庫與您可能已經從vanilla JavaScript中瞭解的其餘交互式功能相結合。

結論

本教程經過在JavaScriptD3庫中建立條形圖。您能夠經過訪問GitHub上的D3 API來了解有關d3.js的更多信息。更多前端教程請前往騰訊雲+社區學習更多知識。

參考文獻：《Getting Started with Data Visualization Using JavaScript and the D3 Library 》

問答

騰訊雲服務器？

相關閱讀

教你從0到1搭建小程序音視頻

教你快速搭建一場發佈會直播方案

移形換影 - 短視頻色彩特效背後的故事

此文已由做者受權騰訊雲+社區發佈，原文連接：https://cloud.tencent.com/dev...

歡迎你們前往騰訊雲+社區或關注雲加社區微信公衆號（QcloudCommunity），第一時間獲取更多海量技術實踐乾貨哦~

海量技術實踐經驗，盡在雲加社區！ https://cloud.tencent.com/dev...