<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. 利用office2000组件进行填充打印报不支持集合。 (Exception from HRESULT: 0x80020011 (DISP_E_NOTACOLLECTION))

    环境:win2008 64位+.net4.0 +office2000 错误提示: 不支持集合. (Exception from HRESULT: 0x80020011 (DISP_E_NOTACOLL ...

  2. jboss hello world

    http://developers.redhat.com/products/devstudio/get-started/ 1. 下载 Red Hat JBoss Developer studio 2. ...

  3. 查找当前目录和所有子目录下的后缀名为.o的文件，删除之

    查找: find . -name "*.o" -exec ls {} \; 删除: find . -name "*.o" -exec rm -f {} \;

  4. javascript、jQuery函数定义和调用方法

    一.javascript 1.var aaa=function(){...} var 方式定义的函数,不能先调用函数,后声明,只能先声明函数,然后调用. 2.function aaa(){...} f ...

  5. eclipseMARS2.0使用可视化设计界面——配置window builder

    1.查看eclipse版本 不同版本的eclipse对应不同的版本window builder,如果不知道版本的话可以通过,点击HELP——>about eclipse来查看自己eclipse的 ...

  6. js学习笔记之一

    一.Javascript 中的对象 1. 建立自定义对象 方法1:对象={属性1:属性值1,属性2:属性值2……属性n:属性值n} 方法2:先定义构造函数,再new创建对象实例. 如: functio ...

  7. redis/php redis扩展 安装

    作者:silenceper 日期:2013-10-03 原文地址: http://silenceper.com/archives/952.html 我是在CentOS 6.3 中进行的. 使用到的软件 ...

  8. JavaScript this用法总结

    在JavaScript中,this关键字可以说是最复杂的机制之一.对this的作用机制缺乏比较深入的理解很容易在实际开发中出现问题. 1.this的作用 为什么要在JavaScript中使用this呢 ...

  9. Android ViewPager 用法

    Android ViewPager 用法 场景:一般第一次打开应用程序时,程序会有一个提示页来给展现应用程序都有哪些功能:或者程序更新时,又更新哪些新特性,都可以使用ViewPager Demo 描述 ...

  10. linux-12基本命令之 cat,more,head, tail ,tr,od,wc,cut,diff

    1.cat 命令 用于查看纯文本文件(较短),格式:"cat[选项][文件]" 查看文本文件 [root@localhost /]# cat 文件名 cat 参数 参数 作用 -n ...