分类
商品
商品
店铺
资讯
分类
商品
商品
店铺
资讯

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

  • 时间:2018-10-14 23:02 作者:Java的小本家 来源:Java的小本家 阅读:445
  • 扫一扫,手机访问
摘要:详情D3.js是一个JavaScript库。它的全称是Data-Driven Documents(数据驱动文档),并且它被称为一个互动和动态的数据可视化库网络。2011年2月初次发布,在撰写本文时,最新的稳固版本是4.4版本,并且不断升级。D3利用可缩放矢量图形或者SVG格式,允许您渲染可放大或者缩

详情

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





Bar Chart








保存并关闭。

第二步 - 在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和D3.js实现数据可视化

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

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

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

设置形状的属性

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

假如我们刷新浏览器,我们会看到所有矩形重叠:

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

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

假如我们此时刷新浏览器,我们会看到如下所示的内容:

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

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

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

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

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

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

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

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

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

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

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

此时,我们的矩形看起来像这样:

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

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

html, body {
margin: 0;
height: 100%
}
.bar {
fill: #0080FF;
stroke: black;
stroke-width: 5
}

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

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

此外,我们可以通过在鼠标悬停时增加条形颜色样式来为我们的图表增加少量交互性:

.bar:hover {
fill: red
}

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

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

或者者,您可以通过增加其余属性来设置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中再次看到它:

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

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

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

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

值得注意的是,由于这是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
}
使用JavaScript和D3.js实现数据可视化

您可以通过定位和样式尽可能多地修改文本。例如,您可能还想更改style.css文件中的font-size属性。

完成的代码和代码改进

此时,您应该拥有一个在JavaScript的D3库中呈现的功能完备的条形图。让我们看看我们所有的代码文件。

barchart.html




Bar Chart









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的更多信息。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部