结果展示图：
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.添加一个SVGvar 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 axisvar 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 axissvg.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>
，每一件事都要用多方面的角度来看它
