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

代码如下所示：

<html>

  <head>

        <meta charset="utf-8">

        <title>Chart</title>

  </head>   

<style>  

.axis path,

.axis line{

    fill: none;

    stroke: black;

    shape-rendering: crispEdges;

}  

.axis text {

    font-family: sans-serif;

    font-size: 11px;

}  

</style>

    <body>

        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

        <script>  

        var width = 600;

        var height = 600;

        var dataset = [];

        var num = 15;  //数组的数量  

        for(var i = 0; i < num ; i++){

            var tempnum = Math.floor( Math.random() * 50 );   // 返回 0~49 整数

            dataset.push(tempnum);

        }  

        var svg = d3.select("body").append("svg")

                                .attr("width",width)

                                .attr("height",height);  

        var xAxisScale = d3.scale.ordinal()

                        .domain(d3.range(dataset.length))

                        .rangeRoundBands([0,500]);  

        var yAxisScale = d3.scale.linear()

                        .domain([0,d3.max(dataset)])

                        .range([500,0]);  

        var xAxis = d3.svg.axis()

                        .scale(xAxisScale)

                        .orient("bottom");  

        var yAxis = d3.svg.axis()

                        .scale(yAxisScale)

                        .orient("left");  

        var xScale = d3.scale.ordinal()

                        .domain(d3.range(dataset.length))

                        .rangeRoundBands([0,500],0.05);  

        var yScale = d3.scale.linear()

                        .domain([0,d3.max(dataset)])

                        .range([0,500]);  

        svg.selectAll("rect")

           .data(dataset)

           .enter()

           .append("rect")

           .attr("x", function(d,i){

                return 30 + xScale(i);

           } )

           .attr("y",function(d,i){

                return 50 + 500 - yScale(d) ;

           })

           .attr("width", function(d,i){

                return xScale.rangeBand();

           })

           .attr("height",yScale)

           .attr("fill","red");  

        svg.selectAll("text")

            .data(dataset)

            .enter().append("text")

            .attr("x", function(d,i){

                return 30 + xScale(i);

           } )

           .attr("y",function(d,i){

                return 50 + 500 - yScale(d) ;

           })

            .attr("dx", function(d,i){

                return xScale.rangeBand()/3;

           })

            .attr("dy", 15)

            .attr("text-anchor", "begin")

            .attr("font-size", 14)

            .attr("fill","white")

            .text(function(d,i){

                return d;

            });  

        svg.append("g")

            .attr("class","axis")

            .attr("transform","translate(30,550)")

            .call(xAxis);  

        svg.append("g")

            .attr("class","axis")

            .attr("transform","translate(30,50)")

            .call(yAxis);   

        </script>    

    </body>

</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. 转-Apache的Order Allow,Deny 详解

    Allow和Deny可以用于apache的conf文件或者.htaccess文件中(配合Directory, Location, Files等),用来控制目录和文件的访问授权. 所以,最常用的是:Or ...

  2. 在Ubuntu环境把PPT和Word转换为swf文件

    项目需要一个在线浏览文档的功能,于是参照网上的代码写了一份利用Microsoft Office 2010和swftools-2013-04-09-1007.exe转换的程序 思路:调用电脑本机的off ...

  3. (转)Oracle 在Drop表时的Cascade Constraints

    Oracle 在Drop表时的Cascade Constraints 假设A为主表(既含有某一主键的表),B为从表(即引用了A的主键作为外键).则当删除A表时,如不特殊说明,则 drop table  ...

  4. VIM神器打造Javascript开发环境

    http://xuyufish.com/vim%E7%A5%9E%E5%99%A8%E6%89%93%E9%80%A0javascript%E5%BC%80%E5%8F%91%E7%8E%AF%E5% ...

  5. Windows 7下硬盘安装Ubuntu 14.04图文教程

    http://www.linuxidc.com/Linux/2014-04/100369.htm

  6. jQuery中animate的height的自适应

    可以用 animate() 方法几乎可以操作大部分CSS 属性,但其属性的值不能为字符串,很多人都遇到过这个问题.   例如:获取一个元素自适应时的高,但el.animate({height:‘aut ...

  7. powershell读写磁盘变量（对象序列化）

    ---[第一章,开篇引子]--- 很久很久以前,我在网上闲逛,看到一头powershell菜鸟,写了一篇感慨道“挖哈哈,我学会powershell啦,我以前很笨,各种不懂,还想把变量保存起来.” 实际 ...

  8. SQL变量、Substring、charindex、case函数、去除重复

      isnull(aa,0)删除表数据: truncate table aaa 添加字段: ALTER TABLE table1 ADD col1 varchar(200) DEFAULT '2008 ...

  9. 数据库:mongodb与关系型数据库相比的优缺点 （转）

    与关系型数据库相比,MongoDB的优点:①弱一致性(最终一致),更能保证用户的访问速度:举例来说,在传统的关系型数据库中,一个COUNT类型的操作会锁定数据集,这样可以保证得到“当前”情况下的精确值 ...

  10. Identify Memory Leaks in Visual CPP Applications —— VLD内存泄漏检测工具

    原文地址:http://www.codeproject.com/Articles/1045847/Identify-Memory-Leaks-in-Visual-CPP-Applications 基于 ...