第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. .axis path,
  3. .axis line{
  4. fill: none;
  5. stroke: black;
  6. shape-rendering: crispEdges;
  7. }
  8. .axis text {
  9. font-family: sans-serif;
  10. font-size: 11px;
  11. }
  12. </style>
  13. <body>
  14. <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  15. <script>
  16. var width = 600;
  17. var height = 600;
  18. var dataset = [ 30 , 20 , 45 , 12 , 21 ];
  19. var svg = d3.select("body").append("svg")
  20. .attr("width",width)
  21. .attr("height",height);
  22. var xScale = d3.scale.linear()
  23. .domain([0,d3.max(dataset)])
  24. .range([0,500]);
  25. var axis = d3.svg.axis()
  26. .scale(xScale)
  27. .orient("bottom");
  28. svg.append("g")
  29. .attr("class","axis")
  30. .attr("transform","translate(10,160)")
  31. .call(axis);
  32. svg.selectAll("rect")
  33. .data(dataset)
  34. .enter()
  35. .append("rect")
  36. .attr("x",10)
  37. .attr("y",function(d,i){
  38. return i * 30;
  39. })
  40. .attr("width",xScale)           //注意这里
  41. .attr("height",28)
  42. .attr("fill","red");
  43. </script>

结果如下图：

 
    
 
 
 
 
 
 
 

博客为： www.ourd3js.com      csdn博客为： blog.csdn.net/lzhlzz

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

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

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

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

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

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

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

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

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

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

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

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

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

  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. 【树莓派】使用树莓派制作img镜像（二）

    树莓派制作的镜像,需要如何使用,这里直接引用目前树莓派官方的文章,不再重复描述: 参考:http://shumeipai.nxez.com/2013/08/31/usb-image-tool.html ...

  2. JS事件委托学习（转）

    JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件     <</</</</li></ ...

  3. 《BI那点儿事》数据流转换——多播、Union All、合并、合并联接

    建立测试数据: CREATE TABLE FactResults ( Name ) , Course ) , Score INT ) INSERT INTO FactResults ( Name , ...

  4. Windows下安装postgresql_psycopg2时出现 "Unabled to find vcvarsall.bat" 的解决办法

    使用django时会用到postgresql的数据库,如下表: 数据库引擎设置 设置 数据库 适配器 postgresql PostgreSQL psycopg 版本 1.x, http://www. ...

  5. Centos 7环境下编译mysql 5.7

    首先在编译之前,我们要了解相关mysql 5.7的编译选项,官网编译选项地址:http://dev.mysql.com/doc/refman/5.7/en/source-configuration-o ...

  6. Cryptopp iOS 使用 RSA加密解密和签名验证签名

    Cryptopp 是一个c++写的功能完善的密码学工具,类似于openssl 官网:https://www.cryptopp.com 以下主要演示Cryptopp 在iOS上的RSA加密解密签名与验证 ...

  7. CBUUID UUIDString unrecognized selector sent to instance 错误

    CBUUID UUIDString unrecognized selector sent to instance 错误 ios7.0,4s 蓝牙出现上述错误! 查看api可知,错误原因,由于CBUUI ...

  8. mysql跟踪和日志

    mysql 打开 general log 后,所有的查询语句都会记录在 general log 文件,文件为只读方式,但这样general log文件会非常大,所以默认是关闭的. 但有时需要查错等原因 ...

  9. [转]去除inline-block元素间间距的N种方法

    来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子 ...

  10. 图的深度优先和广度优先遍历(图以邻接表表示，由C++面向对象实现）

    学习了图的深度优先和广度优先遍历,发现不管是教材还是网上,大都为C语言函数式实现,为了加深理解,我以C++面向对象的方式把图的深度优先和广度优先遍历重写了一遍. 废话不多说,直接上代码: #inclu ...