一.繪製步驟：

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');

最後效果圖：