D3js-画二维坐标轴（x轴，y轴）
结果展示图：
1.首先要引入D3js的js配置文件
<span style="font-size:14px;"><span style="white-space:pre"> </span><script type="text/javascript" src="js/d3/d3.js"></script> <script type="text/javascript" src="js/d3/d3.min.js"></script></span>
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+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>D3 test1/title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/d3/d3.js"></script>
<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript">
//定义变量
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;
//得到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]);
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
//definen x axis & y axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(6);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(6);
//creat x axis & y axis
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)+")");
</script>
</body>
</html>