<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. 最常用的reset代码

    /*css reset code */ /**** 文字大小初始化,使1em=10px *****/body { font-size:12px;} /*字体边框等初始化*/body,div,dl,dt ...

  2. 在64位windows下使用instsrv.exe和srvany.exe创建windows服务[转]

    本文转自:https://www.iflym.com/index.php/computer-use/201205020001.html 在32位的windows下,包括windows7,windows ...

  3. Android应用：StatusBar状态栏、NavigationBar虚拟按键栏、ActionBar标题栏、Window屏幕内容区域等的宽高

    一.屏幕中各种栏目以及屏幕的尺寸 当我们需要计算屏幕中一些元素的高度时,或许需要先获取到屏幕或者各种栏目的高度,下面这个类包含了Status bar状态栏,Navigation bar虚拟按键栏,Ac ...

  4. spark单机环境下运行一些解决问题

    ERROR1.hadoop依赖 [ERROR] - Failed to locate the winutils binary in the hadoop binary path   java.io.I ...

  5. 轻松创建R语言函数包

    讲真,用R这么几年,始终未尝试过写自己的包,看来这就是我与真正程序员的差距了——编程习惯等于没有. 昨天一个偶然的机会想开始写自己的工具包,发现了前期教程的有一些过时.于是,写一个**windows* ...

  6. surface上的手势事件

    surface上的手势事件 1.surface上的触控事件测试. 手指触控在CHROME和FIREFOX下会触发touch事件,而IE10是不支持touch事件的. 手指触控在三个浏览器下均会触发全部 ...

  7. 关于Xcode7中添加不了libresolv.dylib等类似库的问题

    Xcode7中,由于某些机制,使得我们在添加类似于 libresolv.dylib.libz.dylib等库的时候,直接在Build Phases中点击加号添加,似乎已经无法找到相应的库.此时,我们可 ...

  8. Win7下Eclipse中文字体太小

    http://www.cnblogs.com/newdon318/archive/2012/03/23/2413340.html 最近新装了Win7,打开eclipse3.7中文字体很小,简直难以辨认 ...

  9. iOS CGContextRef画图时的常用方法

    UIView的drawRect方法 CoreGraphics绘图 综述:描述系统会调用UIView的drawRect方法,所以coreGraphics的所有实现代码放在该函数内,setNeedsDis ...

  10. 【整理】--C++三种参数传递方式

    在C++中,共有三种参数传递方式: 按值传递(pass by value) 地址传递(pass by pointer) 引用传递(pass by reference) (1)按值传递的过程为:首先计算 ...