D3js-画二维坐标轴(x轴,y轴)

页面导航:首页 > 网络编程 > JavaScript > D3js-画二维坐标轴(x轴,y轴)

D3js-画二维坐标轴(x轴,y轴)

来源: 作者: 时间:2016-01-23 10:23 【

结果展示图:1 首先要引入D3js的js配置文件2 定义一些变量var width =600; var height=600; var dataset = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[4

结果展示图:

\

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

 

	<script type="text/javascript" src="js/d3/d3.js"></script>
	<script type="text/javascript" src="js/d3/d3.min.js"></script>

 

 

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+"/";
%>

D3 test1/title> <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>

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<