<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. Everything搜索结果显示0 Object

    比较过windows本身的文档搜索功能,Everything的本地文档搜索能力简直令人咋舌,更逆天的是软件本身体积很小. 问题:打开everything时,文件列表消失,软件下方信息为0 object ...

  2. Spring 配置 Spring JPA 发生错误的解决方法

    今天在项目的applicationContext.xml中配JPA时 <?xml version="1.0" encoding="UTF-8"?> ...

  3. Android系统启动顺序

    Android是一个基于Linux的开源操作系统.x86(x86是一系列的基于intel 8086 CPU的计算机微处理器指令集架构)是linux内核部署最常见的系统.然而,所有的Android设备都 ...

  4. centos7.2进入单用户模式

    1 - 在启动grub菜单,选择编辑选项启动 2 - 按键盘e键,来进入编辑界面 3 - 找到Linux 16的那一行,将ro改为rw init=/sysroot/bin/sh 4 - 现在按下 Co ...

  5. MySQL的limit查询优化

    MySQL的limit查询优化以下的文章主要是对MySQL limit查询优化的具体内容的介绍,我们大家都知道MySQL数据库的优化是相当重要的.其他最为常用也是最为需要优化的就是limit.MySQ ...

  6. android camera 自定义开发

    1.检测是否有摄像头 /** Check if this device has a camera */ private boolean checkCameraHardware(Context cont ...

  7. 织梦CMS实现多条件筛选功能

    用织梦实现筛选的功能,其实主要就是运用到了织梦的高级搜索功能,然后用ajax去post替换掉本来的结果就可以了. 其实筛选的话,主要有两个问题需要解决,一个是前台的筛选实现,一个是后台根据前台的点击, ...

  8. LintCode 111 Climbing Stairs

    这道题参考了这个网址: http://blog.csdn.net/u012490475/article/details/48845683 /* 首先考虑边界情况,当有1层时,有一种方法. 然后再看2层 ...

  9. 练习1-13：编写一个程序，打印输入中单词长度的直方图（水平）（C程序设计语言 第2版）

    简单未考虑标点符号 #include <stdio.h> #define MAX_WORD_LEN 10 #define BLANK 0 #define IN_WORD 1 #define ...

  10. ABP框架详解（八）动态ApiController的生成和访问机制

    在ABP框架中提供了一套动态生成ApiController的机制(依然支持原生ApiController的使用方式),虽然说是动态生成ApiController但是实际上并没有真正在启动程序的时候生成 ...