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

代码如下所示：

<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. 简单研究Android View绘制三 布局过程

    2015-07-28 17:29:19 这一篇主要看看布局过程 一.布局过程肯定要不可避免的涉及到layout()和onLayout()方法,这两个方法都是定义在View.java中,源码如下: /* ...

  2. Bootstrap <基础二十一>徽章（Badges）

    Bootstrap 徽章(Badges).徽章与标签相似,主要的区别在于徽章的边角更加圆滑. 徽章(Badges)主要用于突出显示新的或未读的项.如需使用徽章,只需要把 <span class= ...

  3. 【转】Memcached安装

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

  4. jQuery--选择器总结

    传统选择器:$('#test') id选择器 $('.test') class选择器$('p') 标签选择器$('*') 通配符选择器$('div,span,.myclass') 多个元素选择器层次选 ...

  5. 如何通过JDBC访问数据库

    Java数据库连接(JDBC)用与在Java程序中实现数据库操作功能,它提供了执行SQL语句.访问各种数据库的方法,并为各种不同的数据库提供统一的操作接口,java.sql包中包含了JDBC操作数据库 ...

  6. ios 开发中 动态库 与静态库的区别

    使用静态库的好处 1,模块化,分工合作 2,避免少量改动经常导致大量的重复编译连接 3,也可以重用,注意不是共享使用 动态库使用有如下好处: 1使用动态库,可以将最终可执行文件体积缩小 2使用动态库, ...

  7. JAVA抽象类与接口的详细解读与示例

    接口存在的原因: JAVA是单继承的,不支持多继承,但是有了接口,JAVA可以实现多个接口: 一个类要是实现某一个接口就必须实现接口内声明的所有方法(强迫执行,即便是空方法,也要实现): 接口特点: ...

  8. JS总结 本地对象1

    Data对象 用于获取当前时间的对象 例如,要用该对象输出:  2016年9月7日 10:57 星期三   这样格式的时间 var time=new Date(), month=time.getMon ...

  9. jfinal和httl结合

    一导入jar包 二配置web.xml文件 三配置httl.properties文件 此时会出现如下问题: 解决办法: 加入 javassist-3.15.0-GA.jar包 再运行会有如下警告 解决办 ...

  10. 本地测试AJAX请求

    要在本地测试AJAX,首先是环境的搭建,因为XHR对象的open方法中参数url是指文件在服务器上的文件.下面以WampServer为例. 1. 下载wamp的安装包,下载地址为:http://221 ...