引言

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

一提到 “数据可视化”，相信很多人第一时间想到的便是那些琳琅满目的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

实现

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

html

<!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）隐藏坐标轴

css

.domain{
	/* 隐藏坐标轴 */
	visibility: hidden;
}

实现效果如下：

（2）隐藏刻度值

css

g text{
	/* 隐藏刻度值 */
	visibility: hidden;
}

实现效果如下：

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