D3基础 | 条形图

最新推荐文章于 2024-08-15 09:29:38 发布

小小酥梨

最新推荐文章于 2024-08-15 09:29:38 发布

阅读量2k

点赞数 4

文章标签： D3 数据可视化入门教程

本文链接：https://blog.csdn.net/weixin_38937890/article/details/89248260

版权

本文通过一个实例介绍了如何使用D3.js创建一个互动条形图，展示了从数据绑定到交互效果实现的全过程。内容涵盖D3介绍、SVG使用、数据绑定、比例尺设置、坐标轴绘制、添加标题和交互效果。适合初学者了解D3.js的基本概念和应用。

摘要由CSDN通过智能技术生成

文章目录

引言
D3介绍和使用
拓展
小结
参考资料

引言

《复仇者联盟4：终局之战》如今正在热映当中。最高高达300多元的票价也真的是“前无古人，后无来者”，出现了“今天你请我看《复联4》，明天我们就是兄弟”的江湖义气。

《复联4》的大火，很大程度和去年的《复仇者联盟3：无限战争》的悲惨的结局有关——宇宙里一半的生命消失了。而这个结果是由很多因素导致的，但是超级英雄的之一的星爵的最后一顿坑爹操作得负很大的责任。影迷们都异常愤怒，于是根据《复联3》中超级英雄的表现，下面这张图诞生了。
在这里插入图片描述十七世纪的大科学家伽利略曾经说过：“我们要测量那些可以测量的东西，至于那些无法测量的东西，我们也要想办法加以测量”。的确，“坑”这种说法太模糊了，下面我们就来“测量”一下星爵“坑”的程度。假如星爵的战斗力为1，并且高一级别的每个英雄的战斗力是低一级别的2倍，那么就获得如下的这张表格。

级别	每个英雄的战斗力	人数	总战斗力
超神	32	1	32
很厉害	16	2	32
有帮上忙	8	4	32
尽力了	4	11	44
废物	2	5	20
一坨屎	1	1	1

看了这个表，大家应该能隐隐约约地感受到了星爵的坑队友行为了，但是这还不够。接下来我们要一起可视化一下这些数据，用D3写一个可以在浏览器展示的可以交互的条形图，一起更真切地感受星爵的坑爹行为。效果如下：
在这里插入图片描述
现在我们来仔细看看这个条形图（如下图）。星爵的“坑”简直铺面而来，有没有？在队友的战斗力面前，他就像蚂蚁遇见了姚明一样微不足道。另一方面我们也可以很快地发现一个有趣的现象，那就是虽然“尽力了”级别每个英雄的战斗力不高，但是这个级别的战斗力总和却是最高的！难道三个臭皮匠真的可以顶一个诸葛亮？
在这里插入图片描述
下面我们就从0到1来实现上面到效果，当然这里必须强调说明上面的数据纯属娱乐，大家不要当真。

本篇文章一共有两个部分：第一部分介绍网页的组成和开发基础（HTML、CSS、JavaScript等），让你们可以开发和调试一些简单的网页；第二部分介绍D3的基本概念和使用，并且一起来完成上述条形图。

如果按耐不住内心激动的同学，可以先看看这个条形图的在线效果或者完整代码（代码量不多）。

同时本人水平有限，接下来内容若有讲解得不恰当的地方，希望大家指出，我感激不尽！

D3介绍和使用

到目前为止，我们已经搭建好了网页的大概框架，下面我们要做的就是用D3完成可视化部分的代码。按照惯例我们先来了解一下D3。
D3（Data-Driven Documents）是一个基于JavaScript的库（就像Processing是基于Java一样），主要目的是通过HMTL，SVG，CSS来给数据生命。D3允许我们将任意数据和基于网页的文档（Documnts）绑定起来（就是任意可以被浏览器渲染的东西，比如HTML、SVG），在数据和文档之间建立联系，这个就是所谓的数据驱动（Data-Driven）。
在学习D3之前，我们先来谈谈我们选择D3进行可视化的理由。
首先我们得说说为什么需要计算机来参与可视化的过程，直接用笔在纸上画为什么不行？。一方面是数据太多，将每一个数据画出来需要花太多的时间。比如下面的a图还勉强可以让人来画，但是面对b图，人就显得无能为力了。另一方面，数据集随着时间一般在变化，用一个基于计算机的工具显然可以节省更多人力。最后还有一个原因就是纸上的图表都是静态的，但是计算机可以给图表添加交互，前面我们也提到了，交互是可视化工具的一个法宝。
在这里插入图片描述
其次计算机上可视化的软件可以说是很多，那为什么我们选则网页来探索和展现可视化的结果。那是因为给大家展现的可视化结果是很重要的，网页是一个获得全球性观众的最快途径。但是必须说一句，D3并不支持一些比较老的浏览器。
最后就是为什么在众多相当优秀可视化的开源库选择了D3。诸如百度的Echarts，阿里蚂蚁金服的AntV，可以用很短的代码（甚至不用写代码），在很快的时间生成很漂亮的图片。相比之下D3的代码更多和更难以理解，呈现的结果不确定性也很大。
那是因为D3更加底层，它没有给我们提供一些组件，而是给我们提供了一些数据驱动的函数来帮助我们创造自己的组件。也就说，其他的库就是卖汽车的，我们只要给商家说明我们想要汽车的型号、颜色等，就可以获得一辆崭新的汽车。但是D3是卖零件的，需要按照自己的需求组装这些零件，从而获得汽车。D3更像一个探索可视化原理的库，而不是一个可视化的库。
同时D3的作者是纽约时报的工程师，而D3 项目的代码托管于 GitHub（一个开发管理平台，目前已经是全世界最流行的代码托管平台，云集了来自世界各地的优秀工程师）。在众多开源库中是一个很流行的库，目前star的数量在所有github开源项目里排11位，并且是这11位中唯一一个数据可视化的开源库。
流行就意味着D3有很好的生态环境，有很多案例、教程和社区，我们能很容易找到学习资源、问题解答。
如果你想在短的时间作出优美的可视化，你可以使用Echarts和AntV等，但是如果你希望了解每种可视化方法的原理，那么D3将是一个不错的选择。了解原理有很多好处，比如出了问题我知道问题的根源在哪里，同时可以制造更个性化和新颖的可视化图表。
下面激动人心的可视化部分就要开始了。我们使用的是最新版本的D3（5.9.2）。

确定大概流程

第一步我们来确定代码的大概执行流程，在之前代码的基础上我们加入一些代码，最后结果如图：

<html>
<head>
	<!-- 一个简单的html -->
	<meta charset="UTF-8">
	<title>条形图</title>
	<style>
	/*之前定义的一些样式信息*/
	</style>
	<!-- 在这个script标签里我们引入D3.js这个库，只有加了这一行的代码我们才能用D3.js中的方法
	当让你可以D3.js的代码下载下来，然后引用。-->
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>
		function changeColor(){
    
			//之前些的代码....
		}
		//这个函数是将data对应的条形图现实在网页中
		function drawBarChart(data){
    
			//设置svg
			//获得svg
			//设置比例尺
			//绘制条形
			//绘制坐标轴
			//绘制标题
			//添加交互
		}
	</script>
</head>
<body>
	<h1 class='text' onclick="changeColor()">D3与可视化的第一次邂逅</h1>
	<p class="text" id="introduction">星爵的“坑”简直铺面而来，有没有？在队友的战斗力面前，他就像蚂蚁遇见了姚明一样微不足道。</p>
	<!-- 这个是我们的画布，我们将在它上面完成我们的可视化 -->
	<svg></svg>
	<script>
		//这个是我们要可是化的数据
		let data = [
			{
    key: '一坨屎', value: 1},
			{
    key: '废物', value: 10},