D3js-画二维坐标轴（x轴，y轴）

结果展示图：

1.首先要引入D3js的js配置文件

2.定义一些变量

	var width =600;
   	var height=600;
   	var dataset = [
			[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
			[410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
			[600, 150]
						  ];
   	var padding=30;

width 和height 接下来用于定义SVG(可扩展矢量图形)的大小，以及图形位置的处理。dataset是一个点（point）的数组。padding用于处理x轴 和 y轴离边的间距。

3.定义x轴，y轴的尺度

//得到X轴和Y轴的尺度函数
   		var xScale = d3.scale.linear()
	   		.domain([0,d3.max(dataset,function(d)
		   		{
		   			return d[0];
		   		})
		   	])
		   	.range([padding,width-padding*2]);
	   	
	   	var yScale = d3.scale.linear()
	   		.domain([0,d3.max(dataset,function(d)
		   		{
		   			return d[1];
		   		})
		   	])
		   	.range([height-padding,padding]);<

d3.scale.linear ()指定要使用线性函数的scale。

d3.max(dataset,function(d)

{return d[0];

}) 

d3.max()是求最大值；上面的意思是求dataset中数组元素的第一个数（d[0]）的最大值,而d[1]就是数组的第二个数，

如下图所示

domain规定了坐标轴上值的范围。range规定了坐标轴端点的位置，svg的坐标原点是左上角，向右为正，向下为正，而y轴正方向为由下向上，所以(0, height)才是坐标轴的坐标原点。

/*温习下数学：一个自变量是x，因变量是y的函数，x的取值范围叫定义域，y的就叫值域

domain是表示一个定义域，

range是表示一个值域。*/

4.添加一个SVG

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

表示在body标签内添加一个svg标签

 google 浏览器按F12 可以打开类似开发者模式的窗口，里面会有页面的布局等等一些重要信息：如下图我们可以看到创建了一个我们需要的svg标签

注意一定要设定svg的高和宽，如果没有的话，会出现下面这种情况：

只是显示了这么一点点。自定义的大小根本无法满足我们的要求。

5.定义下x轴 和y轴

	var xAxis = d3.svg.axis()
	   	.scale(xScale)
	   	.orient("bottom")
	   	.ticks(6);
	   
	   			
var yAxis = d3.svg.axis()
	   	.scale(yScale)
	   	.orient("left")
	   	.ticks(6);

使用axis定制坐标轴，d3.svg.axis -  create a new axis generator（创建一个axis生成器）。

scale是一个函数 ，可以根据给定的定义域得到值域。（get the range value corresponding to a given domain value.）
orient有四个参数（left、right、top、bottom）定义了坐标轴的位置。

ticks定义了坐标轴上除最小值和最大值以外最多有多少个刻度,D3js有时会根据自己的情况设定多少个刻度。

6.在svg中创建X轴和Y轴

svg.append("g")
	   		.attr("class","axis")
	   		.call(xAxis)
	   		.attr("transform","translate(0,"+(height-padding)+")")
	   		.append("text") ;//添加坐标轴说明
	   		.text("天数")
	   		.attr("transform","translate("+(height-padding)+",0)");//指定坐标轴说明的坐标
	   			
	   	svg.append("g")
	   		.attr("class","axis")
	   		.attr("transform","translate("+padding+",0)")
	   		.call(yAxis)
	   		.append("text") //添加坐标轴说明
	   		.text("人")
	   		.attr("transform","translate(0,"+(padding)+")");//指定坐标轴说明的坐标

attr("calss","axis"),表示定义了一个类，这个类用于设置样式，和css中的类样式一样。

attr("transform","translate("+padding+",0)")；transform表示平移，用于确定所在位置
call(xAxis);表示调用上面定义的函数实现执行该函数，和java通过方法名调用函数执行是一个原理，只是java不用通过call。

7.完整代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>