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

来源：互联网发布：高清网络摄像机怎么用编辑：程序博客网时间：2024/06/06 19:08

结果展示图：

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>

0 0