第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. [Python正则表达式] 字符串中xml标签的匹配

    现在有一个需求,比如给定如下数据: 0-0-0 0:0:0 #### the 68th annual golden globe awards #### the king s speech earns ...

  2. 一个java的DES加密解密类转换成C#

    一个java的des加密解密代码如下: //package com.visionsky.util; import java.security.*; //import java.util.regex.P ...

  3. shockt通信

    目前为止,我们使用的最多网络协议还是tcp/ip网络.通常来说,我们习惯上称为tcp/ip协议栈.至于协议栈分成几层,有两种说法.一种是五层,一种是七层. 5.应用层    4.传输层    3.网络 ...

  4. socket详解（一）《转》

    在客户/服务器通信模式中, 客户端需要主动创建与服务器连接的 Socket(套接字), 服务器端收到了客户端的连接请求, 也会创建与客户连接的 Socket. Socket可看做是通信连接两端的收发器 ...

  5. PSP进度（11~16）

    本周psp 11月14号 内容 开始时间 结束时间 打断时间 净时间 查看Java相关资料 18:31 19:28 0 57分 代码实现 19:30 20:46 0 76分 发布博客 22:55 23 ...

  6. linux文件复制与权限赋值

    文件file内容赋值到file2中 1. cp  file1  file2 2. cat file1 > file2 3. cat < file1 > file2 4. dd if= ...

  7. 探索C++的秘密之详解extern "C",这就是为什么很多.lib被我们正确调用确总是无法解析的。

    (转载,绝对的有用) lib被我们正确调用确总是无法解析.这是C++编译和C编译的区别 时常在cpp的代码之中看到这样的代码: #ifdef __cplusplus extern "C&qu ...

  8. C++数组小知识

    数组大小 我们一般情况下可以使用sizeof(数组名)/sizeof(数组元素)求数组元素个数,但需要注意的是,当我们需要调用函数处理数组时,数组的长度要在调用函数之前获取,因为调用函数的时候,数组退 ...

  9. 如何有效使用Project（2）——进度计划的执行与监控

    继上次的的<编制进度计划.保存基准>继续讲解如何对计划进行执行和监控. 计划执行即:反馈实际进度.反馈工作消耗(本文只考虑工时,不考虑成本).提出计划变更请求.如果你的企业实施了专门的PM ...

  10. svn用法：摘自http://wh-vip-126-com200907043220.iteye.com/blog/424642

    下载最新版本svn(http://www.visualsvn.com/server/ ) 1.安装SVN 2.创建user与repository 3.Eclipse下配置SVN插件    3.1帮助- ...