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

代码如下所示：

<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学习日记

    1.[2013-10-03 13:45:38 - FileManager] res\drawable-xxhdpi\FileManager.jpg: Invalid file name: must c ...

  2. String Mybatis 多数据源配置

    做项目用到了多数据源的配置,有时候不用就忘记了,自己做下备份以防止忘记. 在配置文件中: <bean id="ds1" class="org.apache.comm ...

  3. HOJ 1004: Prime Palindromes

    问题:输入两个整数 a 和 b (5 <= a < b <= 1,000,000,000),输出 [a, b] 内的所有回文质数. 最简单的暴力解法是依次遍历 [a, b] 范围内的 ...

  4. Also unsere eigene Christian Louboutin Webshop bietet die überragende Christian Louboutin Schuhe uk schiebt zusammen mit kostengünstigen Wert

    www.heelschuhe.de, Es ist wirklich eine der Frauen erfordern immer interessant und auch Louboutin Pu ...

  5. uboot环境变量实现分析

    u-boot的环境变量用来存储一些经常使用的参数变量,uboot希望将环境变量存储在静态存储器中(如nand nor eeprom mmc). 其中有一些也是大家经常使用,有一些是使用人员自己定义的, ...

  6. 【转】tomcat性能调优

    一.总结前一天的学习 从"第三天"的性能测试一节中,我们得知了决定性能测试的几个重要指标,它们是: ü   吞吐量 ü   Responsetime ü   Cpuload ü   ...

  7. 如何判断js中的数据类型？

    js六大数据类型:number.string.object.Boolean.null.undefined string: 由单引号或双引号来说明,如"string" number: ...

  8. JS刷新父窗口的几种方式

    浮层内嵌iframe及frame集合窗口,刷新父页面的多种方法   <script language=JavaScript>       parent.location.reload(); ...

  9. 学习Excel 十大函数

    云课堂视频教程 笔记总结: URL:http://study.163.com/course/courseLearn.htm?courseId=1009026#/learn/video?lessonId ...

  10. break into Ubuntu System

    This morning, I got a spare machine from of of the labmates. The OS is ubuntu 12.04. I could not log ...