D3.js之坐标轴

一.绘制步骤：

1. 先创建一个svg元素

     	//创建一个svg元素
     	var width = 600;
     	var height = 600;
     	var svg = d3.select('body')
     				.append('svg')
     				.attr('width', width)
     				.attr('height', height);

    

2. 定义用于坐标轴的线性比例尺

     	//定义用于坐标轴的线性比例尺
     	var xScale = d3.scale.linear()
     					.domain([0,10])
     			        .range([0,300]);

    

3. 定义坐标轴

     	//定义坐标轴
     	var axis = d3.svg.axis()
     			.scale(xScale)        //使用上面定义的比例尺
     			.orient('bottom');     //刻度方向向下

    

4. 在svg中添加一个包含坐标轴各元素的g元素

     	//在svg中添加一个包含坐标轴各元素的g元素
     	var gAxis = svg.append('g')
     				.attr('transform', 'translate(80,80)');   //平移到(80,80)

    

5. 在gAxis中绘制坐标轴

   //在gAxis中绘制坐标轴
     	axis(gAxis);

   效果图：

 

---

坐标轴是绘制出来了，但是太丑了，这是因为还没有给坐标轴定制样式

	<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>

 

最后再给坐标轴添加axis的类名

gAxis.attr('class', 'axis');

最后效果图：