迎接人人前去腾讯云+社区，猎取更多腾讯海量手艺实践干货哦~
引见
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.csshtml, 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/dev…
迎接人人前去腾讯云+社区或关注云加社区微信民众号（QcloudCommunity），第一时间猎取更多海量手艺实践干货哦~
海量手艺实践经验，尽在云加社区！ https://cloud.tencent.com/dev…
