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

代码如下所示：

<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. python网络编程【一】

    TCP/IP 是标准的协议,它可以使用世界范围内的计算机通过Internet或本地的网络通信 1.编写一个TCP客户端程序 #!/usr/bin/env python import socket, s ...

  2. B树

    /************************************************ *作者:陈新 *时间:2014 6.3 *邮箱:cx2pirate@gmail.com * **** ...

  3. CVPR历年Best Papers

    作者:我爱机器学习原文链接:CVPR历年Best Papers CVPR (Computer Vision)(2000-2016) 年份 标题 一作 一作单位 2016 Deep Residual L ...

  4. Tomcat容器虚拟路径设置

    1.[官方文档]在tomcat\conf下server.xml中找到 <Host name="localhost" appBase="webapps" u ...

  5. Java String.split()小点

    java String.split(); 别的不说,单说其中一个问题,这个函数去切分空字符串时,得到的结果: public static void main(String[] args) {// St ...

  6. android base64 和 aes 加密 解密

    package pioneerbarcode.ccw.com.encryptanddecode;import android.os.Bundle;import android.support.v7.a ...

  7. Windows Server 2003 IIS6.0+PHP5(FastCGI)+MySQL5环境搭建教程

    准备篇 一.环境说明: 操作系统:Windows Server 2003 SP2 32位 PHP版本:php 5.3.14(我用的php 5.3.10安装版) MySQL版本:MySQL5.5.25 ...

  8. Apache Flume 1.7.0 发布，日志服务器

    Apache Flume 1.7.0 发布了,Flume 是一个分布式.可靠和高可用的服务,用于收集.聚合以及移动大量日志数据,使用一个简单灵活的架构,就流数据模型.这是一个可靠.容错的服务. 本次更 ...

  9. Java InMemoryCache

    package pay.infrastructure.helper; import org.apache.commons.collections.MapIterator; import org.apa ...

  10. MVC 请求处理流程（一）

    路由系统先获取路由数据,在实现了IHttpModule接口的UrlRoutingModule对象中通过注册HttpApplication的PostResolveRequestCache来解析路由数据并 ...