首页 > 代码库 > D3基础--数轴
D3基础--数轴
转载请注明出处！
概述：
与比例尺类似，D3的数轴实际上也使用来定义参数的函数。但与比例尺不同的是，调用数轴函数并不会返回值，而是会生成数轴相关的可见元素。包括：轴线，标签和刻度。
但是要注意数轴函数只适应于SVG图形，因为他们生成的都是SVG元素，同样，数轴是设计与定量比例尺（与序数比例尺相对）配合使用的。
定义和创建X轴：
1 //定义x轴 2 3 var xAxis = d3.svg.axis() 4 .scale(xScale) 5 .orient("bottom"); 6 7 8 //创建x轴 9 10 svg.append("g")11 .call(xAxis);
上面的代码首先引用了svg，然后append()在这个元素的末尾追加了一个新的g元素。在SVG标签中，g元素是一个分组元素。分组元素是不可见的，跟line，rect和circle不一样，但是他有两大用途：
一是可以用来包含（或组织）其他元素，好让代码看起来整齐；
二是可以对整个分组应用变换，从而影响到该分组中所有元素（line，rect和circle）的视觉表现。
创建了新的g元素后，我们直接在这个元素上调用了call()方法，call()的作用如下：
D3的call()方法回去的传递过来的元素，然后把它交给其他函数，对我们这而言，传递过来的元素是新的分组元素g（虽然这个元素不是必须的，但是鉴于数轴函数需要生成很多线条和数值，有了它可以把所有的元素都封装到一个分组对象中）。而call()接着把g元素交给xAxis函数，也就是要在g元素中生成数轴。
效果图：
修整数轴：
首先给新创建的g元素添加一个axis类，然后为他添加CSS样式：
1 svg.append("g")2 3 .attr(“class”, “axis”)4 5 .call(xAxis);
1 .axis path, 2 3 .axis line { 4 5 fill: none; 6 7 stroke: black; 8 9 shape-rendering: crispEdges;10 11 }12 13 14 15 .axis text {16 17 font-family: sans-serif;18 19 font-size: 11px;20 21 }
现在就体现出把所有数轴元素组织到一个分组g中的好处了，只要使用简单的CSS选择符.axis就能为其中的任何元素添加样式。数周本身是由path，line和text元素组成的，因此上面的css样式瞄准这三个元素。注意，上面通过css对SVG元素使用样式的时候，只能使用SVG认识的属性名。（SVG的属性可以参照MDN网站）。
调整坐标位置到图表下面：
1 svg.append("g")2 .attr("class", "axis")3 .attr("transform", "translate(0," + (h - padding) + ")")4 .call(xAxis);
通过设置g元素的属性transform。SVG的变换功能非常强大这儿先介绍平移（transform）变换。他可以把整个g分组向下平移一段距离。
平移变换的语法很简单，就是translate(x, y)，x,y就是把元素移动到新位置的x和y坐标。可以在浏览器中查看ＤＯＭ元素g。
效果图：
优化刻度：
数轴上的刻度线（ticks）使用来传达信息的，也不是越多越好。可以用ticks()方法粗略的指定刻度线的数量。注意，D3只是把ticks的值当做一个参考，如果发现有更清晰方便理解的值，那么他就会舍弃ticks的值。
1 var xAxis = d3.svg.axis()2 .scale(xScale)3 .orient("bottom")4 .ticks(5); //粗略的设置刻度线的数量
垂直数轴：
1 var yAxis = d3.svg.axis()2 .scale(yScale)3 .orient("left")4 .ticks(5);
同样设置起始坐标：
1 //Create Y axis2 svg.append("g")3 .attr("class", "axis")4 .attr("transform", "translate(" + padding + ",0)")5 .call(yAxis);
效果图：
最终代码：
1 <!DOCTYPE html> 2 3 <html lang="en"> 4 5 <head> 6 7 <title>D3: Test of formatted axis values</title> 8 9 <script type="text/javascript" src="../d3/d3.js"></script> 10 11 <style type="text/css"> 12 .axis path, 16 17 .axis line { 18 19 fill: none; 20 21 stroke: black; 22 23 shape-rendering: crispEdges; 24 25 } 26 .axis text { 30 31 font-family: sans-serif; 32 33 font-size: 11px; 34 35 } 39 </style> 40 41 </head> 42 43 <body> 44 45 <script type="text/javascript"> 49 //Width and height 50 51 var w = 500; 52 53 var h = 300; 54 55 var padding = 30; 56 59 /* 60 61 //Static dataset 62 63 var dataset = [ 64 65 [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], 66 67 [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], 68 69 [600, 150] 70 71 ]; 72 73 */ 74 77 //动态随机生成数据集 78 79 var dataset = []; //Initialize empty array 80 81 var numDataPoints = 50; //Number of dummy data points to create 82 83 var xRange = Math.random() * 1000; //Max range of new x values 84 85 var yRange = Math.random() * 1000; //Max range of new y values 86 87 for (var i = 0; i < numDataPoints; i++) { //Loop numDataPoints times 88 89 var newNumber1 = Math.floor(Math.random() * xRange); //New random integer 90 91 var newNumber2 = Math.floor(Math.random() * yRange); //New random integer 92 93 dataset.push([newNumber1, newNumber2]); //Add new number to array 94 95 } 96 99 //Create scale functions100 101 var xScale = d3.scale.linear()102 103 .domain([0, d3.max(dataset, function(d) { return d[0]; })])104 105 .range([padding, w - padding * 2]);106 107 108 109 var yScale = d3.scale.linear()110 111 .domain([0, d3.max(dataset, function(d) { return d[1]; })])112 113 .range([h - padding, padding]);114 115 116 117 var rScale = d3.scale.linear()118 119 .domain([0, d3.max(dataset, function(d) { return d[1]; })])120 121 .range([2, 5]);122 123 //为刻度标签定义样式（这个例子只是做说明并无太大实际意义）124 125 var formatAsPercentage = d3.format(".1%");126 127 128 129 //Define X axis130 131 var xAxis = d3.svg.axis()132 133 .scale(xScale)134 135 .orient("bottom")136 137 .ticks(5)138 139 .tickFormat(formatAsPercentage);140 143 //Define Y axis144 145 var yAxis = d3.svg.axis()146 147 .scale(yScale)148 149 .orient("left")150 151 .ticks(5)152 153 //对数轴刻度应用定义的格式化函数（观察坐标轴）154 155 .tickFormat(formatAsPercentage);156 157 158 159 //Create SVG element160 161 var svg = d3.select("body")162 163 .append("svg")164 165 .attr("width", w)166 167 .attr("height", h);168 169 170 171 //Create circles172 173 svg.selectAll("circle")174 175 .data(dataset)176 177 .enter()178 179 .append("circle")180 181 .attr("cx", function(d) {182 183 return xScale(d[0]);184 185 })186 187 .attr("cy", function(d) {188 189 return yScale(d[1]);190 191 })192 193 .attr("r", function(d) {194 195 return rScale(d[1]);196 197 });198 199 200 201 /*注释掉各点旁边的标签202 203 //Create labels204 205 svg.selectAll("text")206 207 .data(dataset)208 209 .enter()210 211 .append("text")212 213 .text(function(d) {214 215 return d[0] + "," + d[1];216 217 })218 219 .attr("x", function(d) {220 221 return xScale(d[0]);222 223 })224 225 .attr("y", function(d) {226 227 return yScale(d[1]);228 229 })230 231 .attr("font-family", "sans-serif")232 233 .attr("font-size", "11px")234 235 .attr("fill", "red");236 237 */238 241 //Create X axis242 243 svg.append("g")244 245 .attr("class", "axis")246 247 .attr("transform", "translate(0," + (h - padding) + ")")248 249 .call(xAxis);250 251 252 253 //Create Y axis254 255 svg.append("g")256 257 .attr("class", "axis")258 259 .attr("transform", "translate(" + padding + ",0)")260 261 .call(yAxis);262 265 </script>266 267 </body>268 269 </html>
效果图：
For my lover, cc!
参考书籍：《数据可视化实战》
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。