d3数轴

设定数轴

与比例尺相似，D3的数轴实际上也是由你来定义参数的函数。但与比例尺不同的是，调用数轴函数并不会返回值，而是会生成数轴相关的可见元素，包括轴线、标签和刻度。

使用d3.svg.axis()可以创建通用的数轴函数：

var xAxis = d3.svg.axis();

要使用数轴，最起码要告诉它基于什么比例尺工作。在此，我们把绘制散点图时定义的xScale传给它： 

xAxis.scale(xScale);

还可以继续设置标签相对数轴显示在什么地方。默认位置是底部，也就是标签会出现在轴线下方。水平数轴的位置可 以在顶部也可以在底部。而垂直数轴则要么在左要么在右： 

xAxis.orient("bottom");

把这些方法连缀在一行会更简洁：

[javascript] view plaincopy

1. var xAxis = d3.svg.axis()  
2. .scale(xScale)  
3. .orient("bottom");  

SVG中的其他元素都生成之后再生成数轴，这样数轴就可以出现在“上面了。想要生成数轴还要调用xAxis函数将其插入到svg元素中。

[javascript] view plaincopy

1. svg.append("g")  
2. .call(xAxis);  

 前面的代码首先引用了svg，即DOM中的SVG元素。然后，append()在 这个元素的末尾追加了一个新的g元素。在SVG标签内，g元素就是一个分组（group）元素。分组元素是不可见的，跟line、rect和circle不一样，但它有两大用途：一是可以用来包含（或“组织”）其他元素，好让代码看起来简洁整齐；二是可以对整个分组应用变换，从而影响到该组中所有元素（line、rect和 circle）的视觉表现。D3的call()函数会取得（比如刚才代码链中）传递过来的元素，然后再把它交给其他函数。对我们这例子而言，传递过来的元素就是新的分组元素g（虽然这个元素不是必需的，但鉴于数轴函数需要生成很多线条和数值，有了它就可以把所有元素都封装在一个分组对象内）。而call()接着把g交给了xAxis函数，也就是要 在g元素里面生成数轴。

就该用到SVG变换（transform）了。只要添加一行代码，就可以把整个数轴分组平移到图表下方： 

[javascript] view plaincopy

1. svg.append("g") .attr("class", "axis")   
2. .attr("transform", "translate(0," + (h - padding) + ")") .call(xAxis);   

新增的这行代码在attr()中设置了g元素的属性transform。SVG中的变换功 能非常强大，有多种不同的变换方式，包括缩放和旋转。但我们暂时只介绍平移 （translation）变换，它可以把整个g分组向下移动一定距离。平移变换的语法很简单，就是translate(x,y)，其中x和y的含义都非常明确， 就是要把元素移动到的新位置的x和y坐标。

优化刻度

数轴的刻度线（tick）是用来传达信息的，但也不是越多越好，多过某个数量，刻度线反而会让图表显得混乱。使用ticks()方法就可以粗略地指定刻 度线的数量： 

[javascript] view plaincopy

1. varxAxis = d3.svg.axis()  
2. .scale(xScale)  
3. .orient("bottom")  
4. .ticks(5); //粗略地设置刻度线的数量  

一个简单的散点图

[javascript] view plaincopy

1. //svg的宽度和高度  
2.    var w = 500;  
3.    var h = 300;  
4.    var padding = 30;  
5.    //初始化数据点  
6.    var dataset = [];  
7.    var numDataPoints = 15;  
8.    //x轴最大的数值  
9.    var xRange = Math.random() * 1000;  
10.    //y轴最大的数值  
11.    var yRange = Math.random() * 1000;  
12.    for (var i = 0; i < numDataPoints; i++) {  
13.     var newNumber1 = Math.floor(Math.random() * xRange);  
14.     var newNumber2 = Math.floor(Math.random() * yRange);  
15.     dataset.push([newNumber1, newNumber2]);  
16.    }  
17.    //创建刻度尺  
18.    var xScale = d3.scale.linear()  
19.          .domain([0, d3.max(dataset, function(d) { return d[0]; })])  
20.          .range([padding, w - padding * 2]);  
21.    var yScale = d3.scale.linear()  
22.          .domain([0, d3.max(dataset, function(d) { return d[1]; })])  
23.          .range([h - padding, padding]);  
24.    var rScale = d3.scale.linear()  
25.          .domain([0, d3.max(dataset, function(d) { return d[1]; })])  
26.          .range([2, 5]);  
27.    //定义x轴  
28.    var xAxis = d3.svg.axis()  
29.          .scale(xScale)  
30.          .orient("bottom")  
31.          .ticks(5);  
32.    //定义y轴  
33.    var yAxis = d3.svg.axis()  
34.          .scale(yScale)  
35.          .orient("left")  
36.          .ticks(5);  
37.    //创建svg元素  
38.    var svg = d3.select("body")  
39.       .append("svg")  
40.       .attr("width", w)  
41.       .attr("height", h);  
42.    //创建圆形  
43.    svg.selectAll("circle")  
44.       .data(dataset)  
45.       .enter()  
46.       .append("circle")  
47.       .attr("cx", function(d) {  
48.         return xScale(d[0]);  
49.       })  
50.       .attr("cy", function(d) {  
51.         return yScale(d[1]);  
52.       })  
53.       .attr("r", function(d) {  
54.         return rScale(d[1]);  
55.       });  
56.    //创建标签  
57.    svg.selectAll("text")  
58.       .data(dataset)  
59.       .enter()  
60.       .append("text")  
61.       .text(function(d) {  
62.         return d[0] + "," + d[1];  
63.       })  
64.       .attr("x", function(d) {  
65.         return xScale(d[0]);  
66.       })  
67.       .attr("y", function(d) {  
68.         return yScale(d[1]);  
69.       })  
70.       .attr("font-family", "sans-serif")  
71.       .attr("font-size", "11px")  
72.       .attr("fill", "red");  
73.      
74.    //将x轴追加到g元素中  
75.    svg.append("g")  
76.     .attr("class", "axis")  
77.     .attr("transform", "translate(0," + (h - padding) + ")")  
78.     .call(xAxis);  
79.      
80.    //将y轴追加到g元素中  
81.    svg.append("g")  
82.     .attr("class", "axis")  
83.     .attr("transform", "translate(" + padding + ",0)")  
84.     .call(yAxis);  

其中坐标轴的css如下，这里需要注意的是，坐标轴是由text、line和path构成的：

[javascript] view plaincopy

1. .axis path,  
2.    .axis line {  
3.     fill: none;  
4.     stroke: black;  
5.     shape-rendering: crispEdges;  
6.    }  
7.      
8.    .axis text {  
9.     font-family: sans-serif;  
10.     font-size: 11px;  
11.    }  

最终效果如下图所示：