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

代码如下所示：

<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中的内容提供器

    用途 不同于File, SharedPreferences和DataBase,Content Provider主要用于不同的应用程序间共享数据,允许一个程序安全的访问另一个程序中的数据. 用法 通过C ...

  2. Mvc4学习笔记一(Ajax.ActionLink)

    <style type="text/css"> #left {width:200px; min-height:500px;border:1px solid #ccc;f ...

  3. Linux学习 ：Uboot, Kernel, 根文件系统初步分析

    1.U-Boot启动内核的过程可以分为两个阶段: 1)第一阶段的功能 硬件设备初始化 加载U-Boot第二阶段代码到RAM空间 设置好栈 跳转到第二阶段代码入口 2)第二阶段的功能 初始化本阶段使用的 ...

  4. hihoCoder#1121

    刚开始学习C语言,准备在做hiho的题目的过程中来学习,在此进行记录,如果代码中有错误或者不当的地方还请指正. 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 大家好,我 ...

  5. 杭电ACM1001

    原题:http://acm.hdu.edu.cn/showproblem.php?pid=1001 #include <stdio.h> int main(void) { int i,n, ...

  6. linux下用eclipse + GDBserver + JLINK 在线调试（ARM11）

    (一)环境: 目标版:TINY6410 OS:centOS6.5 IDE:eclipse luna CDT:v8.3 GDB:V7.5 (二)环境监理 1.安装cenntos:参考其他相关文章,这里重 ...

  7. people have been arrested under other offences instead.

    Homosexuality is not explicitly banned in Egypt but gay people have been arrested under other offenc ...

  8. EXCEL里面的数字显示为文本 不用科学计数法显示

    1. 在输入这一串数字前加撇号“'”(英文状态下的单引号)即可.2. 先将这一列设置为“文本”格式,然后直接输入这一串数字即可.   已经输入好了数字,那估计你这些数字的后三位都已经全变成“0”了,用 ...

  9. PHP往mysql数据库中写入中文失败

    该类问题解决办法就是 在建立数据库连接之后,将该连接的编码方式改为中文. 代码如下: $linkID=@mysql_connect("localhost","root&q ...

  10. java 实现一个简易计算器

    import java.util.Scanner;public class Test { public static void main(String[] args) { count(); } pub ...