歡迎大家前往騰訊雲+社區，獲取更多騰訊海量技術實踐干貨哦~
介紹
D3.js是一個JavaScript庫。它的全稱是Data-Driven Documents（數據驅動文檔），並且它被稱為一個互動和動態的數據可視化庫網絡。2011年2月首次發布，在撰寫本文時，最新的穩定版本是4.4版本，並且不斷更新。D3利用可縮放矢量圖形或SVG格式，允許您渲染可放大或縮小的形狀，線條和填充，而不會降低質量。本教程將指導您使用JavaScript D3庫創建條形圖。
准備
為了充分利用本教程，您應該熟悉JavaScript編程語言以及CSS和HTML的知識。
盡管你將使用CSS來進行D3的樣式設定，但值得注意的是，很多在HTML上使用的標准的CSS在SVG的使用方式會不一樣-也就是說，你會用stroke，而不是border，使用fill而不是color。
我們將使用文本編輯器和Web瀏覽器。出於測試目的，建議使用工具來檢查和調試JavaScript、HTML和CSS，例如Firefox Developer Tools或Chrome DevTools。
第一步 - 創建文件和參考D3
讓我們首先創建一個目錄來保存我們所有的文件。您可以隨意調用它，我們將其稱為D3項目。創建后，進入目錄。
mkdir D3-project
cd D3-project
要使用D3的功能，您必須在網頁中包含d3.js文件。它長約16,000行，大小約500kb。
讓我們用curl來將文件下載到我們的目錄中。
要下載最適合包含項目的壓縮版本，請輸入：
curl https://d3js.org/d3.v4.min.js --output d3.min.js
如果您打算閱讀D3代碼，最好通過輸入以下內容來獲得未壓縮版本：
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 》
問答
相關閱讀
此文已由作者授權騰訊雲+社區發布，原文鏈接：https://cloud.tencent.com/developer/article/1181781?fromSource=waitui
歡迎大家前往騰訊雲+社區或關注雲加社區微信公眾號（QcloudCommunity），第一時間獲取更多海量技術實踐干貨哦~
海量技術實踐經驗，盡在雲加社區！ https://cloud.tencent.com/developer?fromSource=waitui