引言

如果让你绘制一个坐标轴，你会怎么做?

坐标轴

一提到 “数据可视化”，相信很多人第一时间想到的便是那些琳琅满目的web前端第三方库，如：Highcharts，D3.js，Echarts （百度）和AntV（阿里）等。

虽然它们实现数据可视化的方式各不相同，但万变不离其宗。所有的第三方库都是基于以下两种浏览器图形渲染技术实现的，即： Canvas 和 SVG 。

本文主要介绍使用d3.js绘制坐标轴的具体过程。

D3.js简介

  • D3：数据驱动文档（Data-Driven Documents）。

  • 是一个基于 web 标准的 JavaScript可视化库。

  • 它可以通过使用SVG、Canvas和HTML把数据鲜活形象地展现出来。

  • 兼容性： 兼容IE9 及以上的所有主流浏览器，对于移动端的兼容性也同上。

  • 入门略复杂，但灵活可控，可以实现私人订制。

  • D3.js（v3） 基于SVG，方便自己定制；D3.js（v4）支持Canvas+SVG。

  • 代码开源

  • 完全免费

  • 官方文档： https://github.com/xswei/d3js_doc

实现

该功能的实现过程较为简单，具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="axisDiv">
			<div class="axis" id="axis1"></div>
			<div class="axis" id="axis2"></div>
		</div>
	</body>
	<style>
		#axisDiv{
			background-color: aquamarine;
			width: 1000px;
			height: 100px;
		}
		.axis{
			width: 1000px;
			height: 50px;
			background-color: aqua
		}
	</style>
	<script src="./d3.js"></script>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script>
		$(function(){
			drawAxis(200);
		});

		//通过d3.js(新版本)绘制坐标轴
		function drawAxis(maxValue) {
			var width = 1000,//画布的宽度
				height = 50;//画布的高度
            
            // 创建svg元素，并设置其属性
			var svg1 = d3.select("#axis1")//选择文档中的元素
						.append('svg')//添加一个svg元素
						.attr('width', width + 'px')//设定宽度
						.attr('height', height + 'px');//设定高度
			var svg2 = d3.select("#axis2")//选择文档中的元素
						.append('svg')//添加一个svg元素
						.attr('width', width + 'px')//设定宽度
						.attr('height', height + 'px');//设定高度
            
            /* 创建线性比例尺
             * scaleLinear().domain([numbers]):输入域；[numbers]为数组，必须包含两个或以上的数字，且必须为数字
             * scaleLinear().range([values]):输出域；[values]同样为数组
             */
			var xScale1 = d3.scaleLinear()
							.domain([0, maxValue])
							.range([10, width - 10]);
			var xScale2 = d3.scaleLinear()
							.domain([0, maxValue])
							.range([10, width - 10]);
			// 创建坐标轴
			var xAxis1 = d3.axisBottom()
						   .ticks(maxValue/4)//刻度数目
						   .scale(xScale1);
			var xAxis2 = d3.axisTop()
						   .ticks(maxValue/4)//刻度数目
						   .scale(xScale2);
			
			
			svg1.append('g')// 在svg中添加一个包含坐标轴各元素的g元素
				.attr('transform','translate(0,5)')//设置g元素位置
			    .call(xAxis1);//绘制坐标轴

			svg2.append('g')// 在svg中添加一个包含坐标轴各元素的g元素
				.attr('transform','translate(0,45)')//设置位置
			    .call(xAxis2);//绘制坐标轴
		}
	</script>
</html>

实现效果如下：

初始效果

附：

此外，我们还可以对坐标轴的样式进行修改。如：

（1）隐藏坐标轴

1
2
3
4
.domain{
	/* 隐藏坐标轴 */
	visibility: hidden;
}

实现效果如下：

隐藏坐标轴

（2）隐藏刻度值

1
2
3
4
g text{
	/* 隐藏刻度值 */
	visibility: hidden;
}

实现效果如下：

隐藏刻度值

阿汤笔迹微信公众平台

关注**“阿汤笔迹”** 微信公众号，获取更多学习笔记。
原文地址：http://www.atangbiji.com/2020/10/18/drawAxisByD3js
博主最新文章在个人博客 http://www.atangbiji.com/ 发布。