【一起学D3.js】（四）

---

前言

今天来学习怎么使用d3.js画出来一个坐标轴，来吧展示。

一、画坐标轴的步骤

坐标轴是可视化图标中经常出现的一种图形，有轴线、刻度和标签组成。可以分为水平的x轴和垂直方向向上的y轴。D3支持了四种绘制坐标轴的函数：
(1) d3.axisTop()：创建顶部坐标轴
(2) d3.axisRight()：创建垂直居右坐标轴
(3) d3.axisBottom()：创建底部坐标轴
(4) d3.axisLeft()：创建垂直居左坐标轴

二、画一个x坐标轴

代码如下：

   // 将 SVG 画布的宽高定义成变量
	var width = 400,
	height = 100;
	// 需要刻画的数据
	var data = [10, 15, 20, 25, 30];
	// 添加 SVG 画布
	var svg = d3
	.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);
	// 创建线性比例尺
	// 设置其宽高、定义域值域
	// 从定义域到值域：10->0，30->300
	var scale = d3
	.scaleLinear()
	.domain([d3.min(data), d3.max(data)])
	.range([0, width - 100]);
	// 创建横向底部的  x 轴，并向  x 轴添加比例尺
	var x_axis = d3.axisBottom().scale(scale);
	// 创建“组”并向其中插入 x 轴坐标
	svg.append("g").call(x_axis);

运行代码，效果如下图：

对应生成的HTML的代码如下：

<svg width="400" height="100">
	<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
	<path class="domain" stroke="currentColor" d="M0,6V0H300V6"></path>
	<g class="tick" opacity="1" transform="translate(0,0)">
	<line stroke="currentColor" y2="6"></line>
	<text fill="currentColor" y="9" dy="0.71em">10</text>
	</g>
	<g class="tick" opacity="1" transform="translate(30,0)">
	<line stroke="currentColor" y2="6"></line>
	<text fill="currentColor" y="9" dy="0.71em">12</text>
	</g>
	...
    </g>
</svg>

三、画一个y坐标轴

代码如下：

<script>
	var width = 400,
	height = 400;

	var data = [10, 15, 20, 25, 30];
	var svg = d3
	.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	var scale = d3
	.scaleLinear()
    .domain([d3.min(data), d3.max(data)])
	.range([height / 2, 0]);

	var y_axis = d3.axisLeft().scale(scale);

	svg.append("g").attr("transform", "translate(50, 10)").call(y_axis);
	// translate transform	操作调整了坐标轴在SVG图中的位置
</script>

运行代码后效果如下图：

四、同时画一个x坐标轴和y坐标轴

<script>
	var width = 400,
	height = 400;
	var data = [10, 15, 20, 25, 30];

	var svg = d3
	.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	var xscale = d3
	.scaleLinear()
	.domain([0, d3.max(data)]) 15	.range([0, width - 100]); 16
	var yscale = d3
	.scaleLinear()
	.domain([0, d3.max(data)])
	.range([height / 2, 0]);

	var x_axis = d3.axisBottom().scale(xscale);

	var y_axis = d3.axisLeft().scale(yscale);

	svg.append("g").attr("transform", "translate(50, 10)").call(y_axis);

	var xAxisTranslate = height / 2 + 10;

 
	svg
	.append("g")
	.attr("transform", "translate(50, " + xAxisTranslate + ")")
	.call(x_axis);
</script>

运行效果如下图：

---

今天学到这里，等我接着更