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 type="text/css" href="http://www.likecs.com/style.css"> <!-- Alternatively use d3.js here --> <script type="text/javascript" src="http://www.likecs.com/d3.min.js"></script> </head> <body> <script type="text/javascript" src="http://www.likecs.com/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");