<html>

<head>

    <meta charset="utf-8">

    <title>第三课：为柱形图添加坐标轴</title>  

    <style>

    .axis path,

    .axis line{

        fill: none;

        stroke: black;

        shape-rendering: crispEdges;

    }

    .axis text {

        font-family: sans-serif;

        font-size: 11px;

    }

    .MyRect {

        fill: steelblue;

    }

    .MyText {

        fill: white;

        text-anchor: middle;

    }

    </style>

</head>

<body> 

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

<script>

var body = d3.select("body");

var width = 400;

var height = 400;

var svg = body.append("svg")

            .attr("width", 400)

            .attr("height", 400);

// 1. 比例尺   

var xScale = d3.scale.ordinal()

                .domain([0, 1, 2, 3, 4, 5, 6])

                .rangeRoundBands([0,300]);//在300个像素上平均分配

console.info(xScale(1));

// 2. 坐标轴  x

var xAxis = d3.svg.axis()

                .scale(xScale)

                .orient("bottom");

var gxAxis = svg.append("g")

                .attr("class","axis")

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

                .call(xAxis);

// 3.  y轴

var yScale = d3.scale.linear()

                .domain([100, 0])

                .range([0, 250]);

var yAxis = d3.svg.axis()

                .scale(yScale)

                .orient("left");

var gyAxis = svg.append("g")

                .attr("class","axis")

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

                .call(yAxis);

//绘制矩形

var dataset = [30, 20 , 10, 60, 50, 40, 33];

yScale.domain([0,100]);

var rects = svg.selectAll(".MyRect")

                .data(dataset)

                .enter()

                .append("rect")

                .attr("class","MyRect")

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

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

                    return xScale(i);

                })

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

                    return width - 150 - yScale(d);

                })

                .attr("width",function(){

                    return xScale.rangeBand() - 4;

                })

                .attr("height",function(d){

                    return yScale(d);

                });

    var texts = svg.selectAll(".MyText")

    .data(dataset)

    .enter()

    .append("text")

    .attr("class","MyText")

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

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

        return xScale(i);

    })

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

        return width - 150 - yScale(d);

    })

    .attr("dx",function(){

        return xScale.rangeBand()/2;

    })

    .attr("dy",function(d){

        return 15;

    })

    .text(function(d){

        return d;

    });

</script>

</body>

</html>

D3.js 学习（ 一）的更多相关文章

  1. 数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总

    习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...

  2. D3.js学习（一）

    从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...

  3. D3.js学习记录【转】【新】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. D3.js学习笔记（六）——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  5. d3.js学习笔记（五）——将数据结构化为D3.js可处理的

    目标 在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优 ...

  6. D3.js学习笔记（一）——DOM上的数据绑定

    开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...

  7. D3.js学习（七）

    上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...

  8. D3.js学习记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. D3.js学习笔记（四）—— 使用SVG坐标空间

    目标 在这一章,你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上. 我们的目标就是使用下面的数据集: var spaceCircles = [30,70,110]; 并使用D3.j ...

  10. D3.js学习笔记（三）——创建基于数据的SVG元素

    目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...

随机推荐

  1. Java回调函数

    维基百科上的定义:在计算机程序设计中,回调函数,或简称回调,是指通过函数参数传递到其它代码的,某一块可执行代码的引用.这一设计允许了底层代码调用在高层定义的子程序. 所谓回调,就是客户程序C调用服务程 ...

  2. 为什么一个类的全局变量默认以m开头？

    某天闲着无聊,突然想起来为什么大家都习惯将全局变量使用m开头,于是追根求源,查了一些资料,虽然并不是我想要的,但是也总结一下. 在stackoverflow上就有人问: Why do most var ...

  3. 网页加载图片原理<转>

    http://www.haorooms.com/post/web_http_request 图片的http请求,有很多种情况,那么究竟什么情况下面不会发生请求呢?下面我用案例一一列举一下,希望对你深入 ...

  4. TeamViewer11使用教程

    下载地址(官网):http://res.ncmem.com/download/TeamViewer11.exe 下载地址(360):https://yunpan.cn/cvxRiTfSC3iH6(访问 ...

  5. 使用 xcode 8 构建版本 iTunes Connect 获取不到应用程序的状态的解决办法

              Archive生成Release版本的ipa并将其提交到iTunesConnect,上传成功后我打开iTunesConnect网站登录我的开发账号,准备提交版本更新,然而我却找不到 ...

  6. RHEL6p5下ntfs分区的挂载及自动挂载

    No.1: #uname -a //查看你的Linux内核版本的命令 No.2:去http://www.atrpms.net/dist/el5/fuse/下载与内核接近的三个东西 fuse-libs- ...

  7. Use Hibernate core API

    For Hibernate configuration, We can use hibernate.cfg.xml file to configure: <?xml version='1.0' ...

  8. html+css+javascript实现简易轮播图片

    html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <lin ...

  9. IOS9 新加关键字 nullable、nonnull、null_unspecified、null_resettable

    #import "ViewController.h" @interface ViewController () @property(nonatomic,nullable)NSStr ...

  10. halcon车牌的识别

    read_image (Audi2, 'audi2') fill_interlace (Audi2, ImageFilled, 'odd') dev_set_color('green') thresh ...