前面几节讲解了图标、坐标轴、比例等等，这一节整合这些内容做一个实用的图表。结果图如下：

代码如下所示：

  1. <html>
  2.   <head>
  3.         <meta charset="utf-8">
  4.         <title>Chart</title>
  5.   </head>   
  6.  
  7. <style>  
  8.  
  9. .axis path,
  10. .axis line{
  11.     fill: none;
  12.     stroke: black;
  13.     shape-rendering: crispEdges;
  14. }  
  15.  
  16. .axis text {
  17.     font-family: sans-serif;
  18.     font-size: 11px;
  19. }  
  20.  
  21. </style>
  22.     <body>
  23.         <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  24.         <script>  
  25.  
  26.         var width = 600;
  27.         var height = 600;
  28.         var dataset = [];
  29.         var num = 15;  //数组的数量  
  30.  
  31.         for(var i = 0; i < num ; i++){
  32.             var tempnum = Math.floor( Math.random() * 50 );   // 返回 0~49 整数
  33.             dataset.push(tempnum);
  34.         }  
  35.  
  36.         var svg = d3.select("body").append("svg")
  37.                                 .attr("width",width)
  38.                                 .attr("height",height);  
  39.  
  40.         var xAxisScale = d3.scale.ordinal()
  41.                         .domain(d3.range(dataset.length))
  42.                         .rangeRoundBands([0,500]);  
  43.  
  44.         var yAxisScale = d3.scale.linear()
  45.                         .domain([0,d3.max(dataset)])
  46.                         .range([500,0]);  
  47.  
  48.         var xAxis = d3.svg.axis()
  49.                         .scale(xAxisScale)
  50.                         .orient("bottom");  
  51.  
  52.         var yAxis = d3.svg.axis()
  53.                         .scale(yAxisScale)
  54.                         .orient("left");  
  55.  
  56.         var xScale = d3.scale.ordinal()
  57.                         .domain(d3.range(dataset.length))
  58.                         .rangeRoundBands([0,500],0.05);  
  59.  
  60.         var yScale = d3.scale.linear()
  61.                         .domain([0,d3.max(dataset)])
  62.                         .range([0,500]);  
  63.  
  64.         svg.selectAll("rect")
  65.            .data(dataset)
  66.            .enter()
  67.            .append("rect")
  68.            .attr("x", function(d,i){
  69.                 return 30 + xScale(i);
  70.            } )
  71.            .attr("y",function(d,i){
  72.                 return 50 + 500 - yScale(d) ;
  73.            })
  74.            .attr("width", function(d,i){
  75.                 return xScale.rangeBand();
  76.            })
  77.            .attr("height",yScale)
  78.            .attr("fill","red");  
  79.  
  80.         svg.selectAll("text")
  81.             .data(dataset)
  82.             .enter().append("text")
  83.             .attr("x", function(d,i){
  84.                 return 30 + xScale(i);
  85.            } )
  86.            .attr("y",function(d,i){
  87.                 return 50 + 500 - yScale(d) ;
  88.            })
  89.             .attr("dx", function(d,i){
  90.                 return xScale.rangeBand()/3;
  91.            })
  92.             .attr("dy", 15)
  93.             .attr("text-anchor", "begin")
  94.             .attr("font-size", 14)
  95.             .attr("fill","white")
  96.             .text(function(d,i){
  97.                 return d;
  98.             });  
  99.  
  100.         svg.append("g")
  101.             .attr("class","axis")
  102.             .attr("transform","translate(30,550)")
  103.             .call(xAxis);  
  104.  
  105.         svg.append("g")
  106.             .attr("class","axis")
  107.             .attr("transform","translate(30,50)")
  108.             .call(yAxis);   
  109.  
  110.         </script>    
  111.  
  112.     </body>
  113. </html>

　　

下面分别讲解上面的代码：

  • 31 - 34 行：  随机生成数据，赋于数组
  • 36 - 38 行：  定义 svg
  • 40 - 54 行：  定义坐标轴的 scale （比例）和坐标轴，48行为 x 轴，52行为 y 轴
  • 56 - 62 行：  定义柱形图的 scale
  • 64 - 78 行：  绘制柱形图，注意 scale 的使用
  • 80 - 98 行：  绘制文字标签，同样注意 scale
  • 100 - 108 行： 绘制坐标轴
    注意：绘制的时候，要注意绘制的顺序，否则可能会把某些需要的东西覆盖掉。尤其是坐标轴，最好放到最后绘制。
 
 
本文来自：

博客为： www.ourd3js.com

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

转载请注明出处，谢谢。

【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表的更多相关文章

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

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

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

    图1. 柱形图 1. 柱形图 前几章的例子,都是对文字进行处理.本章中将用 D3 做一个简单的柱形图.制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 ...

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

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

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

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

  5. 【 D3.js 入门系列 --- 5 】 如何添加坐标轴

    第3节中做了一个图标,但没有为它添加一个相应的坐标轴,这样不知道每一个柱形到底有多长.这一节做一个坐标轴. D3中的坐标轴都是以 svg 图的形式出现的,这也是为什么在第3节中要使用 svg 的方法做 ...

  6. 【 D3.js 入门系列 --- 9.1 】 生产饼图

    我个人的博客: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处.谢谢. 这一节用 Layout 做一个饼状图.第9节中说过, Layout ...

  7. 【 D3.js 入门系列 --- 5 】 怎样加入坐标轴

    本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处.谢谢.      第3节中做了一个图标.但没有为它加入一个对应的坐标轴. ...

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

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

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

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

随机推荐

  1. JSP内置对象---response 响应

    将response.jsp 页面的html标签(包括html.head.body)全部删掉. <%@ page language="java" import="ja ...

  2. 6、Concurrent-Mark-Sweep

    1.cms 主要用于年老代垃圾回收 2.这玩意牺牲通吐量换取最短垃圾回收时间 3.有的地方说是四个阶段,有的地方说五个阶段,还有六个阶段的,真相是----我也不知道 四个阶段: Initial mar ...

  3. 【转】Memcached安装

    解析:Memcached是什么? Memcached是由Danga Interactive开发的,高性能的,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问速度. 一.软件版本    ...

  4. IOS UITableView移除底部空白行

    tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];

  5. js倒计时显示

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  6. DataTable 删除列 调整列顺序 修改列标题名称

    DataTable dt = new DataTable(); //删除列 dt.Columns.Remove("Sex"); dt.Columns.Remove("Ag ...

  7. 【转】RadControls for Silverlight（学习2-RadDataPager)

    引用地址:http://www.cnblogs.com/forrestsun/archive/2011/05/15/2046894.html <Grid x:Name="LayoutR ...

  8. js⑤

    ##返回在制定位置的的字符  var result = str.charAt(1);  console.log(result);  console.log(str[1]); ##返回在指定的位置的字符 ...

  9. JSHelper时间格式化

    Helper.prototype.FormatDate = function (format) { var _now = new Date(); var o = { "M+": _ ...

  10. Spring中的JDBCTemplate

    src\dayday\JDBCTestTest package dayday;import com.sun.org.apache.xalan.internal.xsltc.compiler.Templ ...