<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. 【随机化】bzoj4080 [Wf2014]Sensor Network

    #include<cstdio> #include<algorithm> #include<cmath> using namespace std; typedef ...

  2. 【13_263】Ugly Number

    简单题 Ugly Number My Submissions Question Total Accepted: 32635 Total Submissions: 94009 Difficulty: E ...

  3. java内存泄漏

    java内存泄漏主要分成两个方面: (1)堆中申请的空间没有被释放 (2)对象已不在被使用,但是仍然存在在内存当中 以下集中情况可能会导致内存泄漏 (1)静态集合的使用hashmap和vector,静 ...

  4. oracle中的函数及其应用

    --..............常用的单行函数......................   -------------------  常用的字符函数  ---------------------- ...

  5. 我的Sharepoint母版页的使用

    在Sharepoint 2010母版页文件夹里面,有一个叫v4.master的母版页文件. 在它的基础上修改成想要的母版页.我们用最少的修改完成我们想要的效果. 我们有时是要这样的一个母版页,顶部Ri ...

  6. [转] How to Show Usual Winform as View in XAF

    How to Show Usual Winform as View in XAF http://www.codeproject.com/Tips/464188/How-to-Show-Usual-Wi ...

  7. android IOC框架学习记录

    一.框架如下几种: 1.Roboguice   2.Spring for Android   3.afinal   4.xUtils   二.Roboguice说明 项目地址:https://gith ...

  8. 获取edit焦点，打开和关闭软键盘

    打开: et_search.requestFocus(); et_search.setFocusable(true); et_search.setFocusableInTouchMode(true); ...

  9. 原创 Datareader 导出为csv文件方法

    DataReader 是游标只读数据, 如果是大数据导出,用Datatable 将耗费巨大内存资源.因为Datatable 其实就是内存中的一个数据表 代码如下 /// <summary> ...

  10. JavaScript + HTML 虚拟键盘效果

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