本人的个人博客为： www.ourd3js.com

csdn博客为： blog.csdn.net/lzhlzz

转载请注明出处。谢谢。

     第3节中做了一个图标。但没有为它加入一个对应的坐标轴。这样不知道每个柱形究竟有多长。这一节做一个坐标轴。

D3中的坐标轴都是以 svg 图的形式出现的，这也是为什么在第3节中要使用 svg 的方法做柱形图的原因。

第4节里我们解说了 scale （比例）的使用方法，在做坐标轴的时候也须要用到比例。第4节中，我们说到scale 是一个函数。这一节中的坐标轴也是一个函数，可是使用方法却有点不同，要注意。

看以下的代码，我们分别定义数据，scale （比例），坐标轴：

  1. 		var dataset = [ 30 , 20 , 45 , 12 , 21 ];
  2. 		var xScale = d3.scale.linear()
  3. 							.domain([0,d3.max(dataset)])
  4. 							.range([0,500]);
  5. 		var axis = d3.svg.axis()
  6. 						.scale(xScale)
  7. 						.orient("bottom");

1-4行是定义数据和 scale （比例），关于比例的内容可看上一节。

5-7是定义坐标轴：

  • d3.svg.axis() 调用这个函数就会生成一个坐标轴的函数
  • scale() 这个函数用于指定坐标轴的 scale （比例）
  • orient() 这个函数用于指定坐标轴的切割点和数字的朝向，在哪个方向显示。 bottom 表示在坐标轴的下方显示。
    画出坐标轴的代码例如以下：
  1. 		svg.append("g")
  2. 			.call(axis);

在 svg 中加入一个g，g是 svg 中的一个属性，是 group 的意思。它表示一组什么东西，如一组 lines ， rects ，circles 事实上坐标轴就是由这些东西构成的。

    上面还调用了一个 call 函数，这个比較重要。在 D3 中，call 相当于定义一个函数。再把选择的元素给它。即相当于例如以下代码：
  1. function foo(selection) {
  2.   selection
  3.       .attr("name1", "value1")
  4.       .attr("name2", "value2");
  5. }
  6. foo(d3.selectAll("div"))

这段代码等同于：

  1. d3.selectAll("div").call(foo);

所以 svg.append("g").call(axis) 就相当于将选择的g元素传给 axis 函数。

    调用之后。坐标轴就会显示在对应的 svg 中。

    还能够定义几个css样式改变坐标轴的粗细。字体等等。 transform 属性用于移动坐标轴在 svg 中的位置。
  1. 		svg.append("g")
  2. 			.attr("class","axis")
  3. 			.attr("transform","translate(10,160)")
  4. 			.call(axis);
    完整的代码例如以下：
  1. <style>
  2.  
  3. .axis path,
  4. .axis line{
  5. 	fill: none;
  6. 	stroke: black;
  7. 	shape-rendering: crispEdges;
  8. }
  9.  
  10. .axis text {
  11. 	font-family: sans-serif;
  12. 	font-size: 11px;
  13. }
  14.  
  15. </style>
  16.  
  17.     <body>  
  18.  
  19. 		<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  20.         <script>
  21.  
  22. 		var width = 600;
  23. 		var height = 600;
  24. 		var dataset = [ 30 , 20 , 45 , 12 , 21 ];
  25.  
  26. 		var svg = d3.select("body").append("svg")
  27. 								.attr("width",width)
  28. 								.attr("height",height);
  29.  
  30. 		var xScale = d3.scale.linear()
  31. 							.domain([0,d3.max(dataset)])
  32. 							.range([0,500]);
  33.  
  34. 		var axis = d3.svg.axis()
  35. 						.scale(xScale)
  36. 						.orient("bottom");
  37.  
  38. 		svg.append("g")
  39. 			.attr("class","axis")
  40. 			.attr("transform","translate(10,160)")
  41. 			.call(axis);
  42.  
  43. 		svg.selectAll("rect")
  44. 		   .data(dataset)
  45. 		   .enter()
  46. 		   .append("rect")
  47. 		   .attr("x",10)
  48. 		   .attr("y",function(d,i){
  49. 				return i * 30;
  50. 		   })
  51. 		   .attr("width",xScale)           //注意这里
  52. 		   .attr("height",28)
  53. 		   .attr("fill","red");
  54.  
  55.         </script>

结果例如以下图：


    以上。谢谢。






【 D3.js 入门系列 --- 5 】 怎样加入坐标轴的更多相关文章

  1. 【 D3.js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

  2. 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

  3. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  4. 【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素

    在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...

  5. 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素

    接着上一讲的内容,这次讨论如何选择元素和使用数据.    现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...

  6. 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld

    下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...

  7. 【 D3.js 入门系列 --- 0 】 简介和安装

    D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...

  8. 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...

  9. 【 D3.js 入门系列 --- 2.1 】 关于怎样选择，插入，删除元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择 ...

  10. 【 D3.js 入门系列 --- 0 】 简介及安装

    家是我的个人博客: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/.转载请注明出处,谢谢. D3的全称是(Data-D ...

随机推荐

  1. Eclipse默认标签TODO,XXX,FIXME和自定义标签

    1 TODO 表示需要实现,但目前还未实现的功能 2 XXX 勉强可以工作,但是需要改进的功能 3 FIXME 代码是错误的,不能工作,需要修复 4.自定义标签 window-->prefere ...

  2. java Socket启动服务

    java -cp /Library/WebServer/Documents/Java/test/src com.zhidian.soft.sendOfClick localhost 8888 java ...

  3. Android动画之仿美团加载数据等待时，小人奔跑进度动画对话框（附顺丰快递员奔跑效果）

    Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果) 首句依然是那句老话,你懂得! finddreams :(http://blog.csdn.net/finddr ...

  4. Codeforces 731 C.Socks-并查集+STL(vector+map)

      C. Socks   time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  5. ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛

    编号 名称 通过率 通过人数 提交人数 A√水题(队友写的 Visiting Peking University 91% 1122 1228 B— Reverse Suffix Array 57% 6 ...

  6. 最小生成树(Minimum Spanning Tree)——Prim算法与Kruskal算法+并查集

    最小生成树——Minimum Spanning Tree,是图论中比较重要的模型,通常用于解决实际生活中的路径代价最小一类的问题.我们首先用通俗的语言解释它的定义: 对于有n个节点的有权无向连通图,寻 ...

  7. hdu6158（圆的反演）

    hdu6158 题意 初始有两个圆,按照标号去放圆,问放完 \(n\) 个圆后的总面积. 分析 圆的反演的应用. 参考blog 设反演圆心为 \(O\) 和反演半径 \(R\) 圆的反演的定义: 已知 ...

  8. 19、Flask实战第19天：CSRF攻击与防御

    CSRF攻击原理 网站是通过cookie来实现登录功能的.而cookie只要存在浏览器中,那么浏览器在访问这个cookie的服务器的时候,就会自动的携带cookie信息到服务器上去.那么这时候就存在一 ...

  9. 36、Django实战第36天：首页功能开发

    1.编辑users.views.py ... class IndexView(View): """ 首页 """ def get(self, ...

  10. 【点分治】【乘法逆元】hdu4812 D Tree

    思路比较裸,但是要把答案存到哈希表里面,这里需要一定技巧,否则会被K=1且点权全是1的数据卡飞.预处理乘法逆元.TLE了一天.换了种点分治的姿势…… #pragma comment(linker,&q ...