使用JavaScript和D3.js实现数据可视化

头像
腾讯云开发者
    阅读 12 分钟
    22

    欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~

    本文由独木桥先生 发表于云+社区专栏

    介绍

    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框上。

    img

    回到我们的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个矩形。

    img

    我们还没有为矩形设置属性以使它们可见，所以现在添加它们。

    设置形状的属性

    我们可以通过使用.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");

    如果我们刷新浏览器，我们会看到所有矩形重叠：

    img

    默认情况下，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");

    如果我们此时刷新浏览器，我们会看到如下所示的内容：

    img

    现在我们有沿X轴间隔开的矩形，代表我们阵列中的每个项目。接下来，让矩形的高度反映数组中的数据。

    我们现在将使用该height属性，并将添加一个类似于我们添加到x属性中的函数。让我们通过传递变量开始d和i到function，并返回d。d代表数据点。

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

    如果你现在运行代码，你会注意到两件事。首先，矩形相当小，其次是它们附着在图表的顶部而不是底部。

    img

    为了解决矩形的小尺寸，让我们乘以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)});

    此时，当我们重新加载页面时，我们会看到一个条形图，我们可以从下到上阅读：

    img

    现在，我们可以设计图表的样式。

    第四步 - 使用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
}

    此时，我们的矩形看起来像这样：

    img

    我们可以为矩形提供其他值，例如用stroke以特定颜色勾勒出矩形，以及stroke-width：

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

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

    这将为我们的矩形提供宽度为5像素的黑色轮廓。

    img

    此外，我们可以通过在鼠标悬停时添加条形颜色样式来为我们的图表添加一些交互性：

    .bar:hover {
  fill: red
}

    现在，当我们将鼠标悬停在其中一个矩形上时，该特定矩形将变为红色：

    img

    或者，您可以通过添加其他属性来设置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中再次看到它：

    img

    如果将鼠标悬停在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)});

    现在加载网页时，您会看到浮动在条形图上方的数字。

    img

    值得注意的是，因为这是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
}

    img

    您可以通过定位和样式尽可能多地修改文本。例如，您可能还想更改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...

    javascript数据可视化云计算程序员
    腾讯云开发者
    21.9k 声望17.3k 粉丝
    « 上一篇
    吴琛：智慧工地——履约考勤系统的应用实践
    下一篇 »
    冀永楠：OCR的应用锦集及背后技术

    引用和评论

    推荐阅读
    头像
    拥抱开发新范式，大咖齐聚 Techo TVP 技术沙龙全面解析 AI 云开发

    腾讯云开发者

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 24阅读 6k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.1k

    头像
    疫情特殊时期，致 SegmentFault 思否全体员工的一封公开信

    波波Nadia赞 14阅读 21.3k评论 10

    头像
    开发插件集合

    寒青赞 14阅读 3.4k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    0 条评论
    得票最新