d3.scale.linear()

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="../ventor/d3.min.js"></script>

    <style type="text/css">

        body

        {

            padding-top: 50px;

            padding-left: 100px;

        }

        #chartArea {

            width: 400px;

            height: 300px;

            background-color: #CCC;

        }

        .bar

        {

            display: inline-block;

            width: 20px;

            height: 75px; /* Gets overriden by D3-assigned height below */

            margin-right: 2px;

            fill: teal; /* SVG doesn't have background prop, use fill instead*/

            z-index:99;

        }

    </style>

</head>

<body>

<section id="chartArea"></section>

<script>

    var dataset = [45,59,17,29,46,68], w = 400, h = 300;

    var svg = d3.select('#chartArea').append('svg')

            .attr('width', w)

            .attr('height', h); //svg deosn't need 'px'

    var yScale = d3.scale.linear()

            .domain([0, 68])  // The domain which y can access from min to max

            .range([0, h]);

    svg.selectAll('div')

            .data(dataset)

            .enter()

            .append('rect')// svg doesn't have div, use rect instead

            .attr('class', "bar")

            .attr('width', 40)

            .attr('x', function(each_data, index){

                return index*70;

            })

            .attr('y', function(each_data){

                return h-yScale(each_data);

            })

            .attr('height', function(each_data, i){

                return yScale(each_data);

            });

</script>

<!--

    1. svg should use 'fill' prop instead 'background-color'

    2. svg width & height no need 'px'

    3. attr(function(data_val, index){})

    4. create svg, d3.select('selector').append('svg').attr('width', xxx).attr('height', xx)

    5. svg should use 'rect' instead of 'div'

    -->

</body>

</html>

[D3] 3. Scaling Basics的更多相关文章

  1. [D3] 2. Basics of SVG

    1. svg should use 'fill' prop instead 'background-color'2. svg width & height no need 'px'3. att ...

  2. Radio Basics for RFID

    Radio Basics for RFID The following is excerpted from Chapter 3: Radio Basics for UHF RFID from the ...

  3. d3可视化实战00：d3的使用心得和学习资料汇总

    最近以来,我使用d3进行我的可视化工具的开发已经3个月了,同时也兼用其他一些图表类库,自我感觉稍微有点心得.之前我也写过相关文章,我涉及的数据可视化的实现技术和工具,但是那篇文章对于项目开发而言太浅了 ...

  4. D3.js学习（七）

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

  5. D3.js学习（六）

    上节我们学习了如何绘制多条曲线, 以及给不同的曲线指定不同的坐标系.在这节当中,我们会对坐标轴标签相关的处理进行学习.首先,我们来想一个问题, 如何我们的x轴上的各个标签的距离比较近,但是标签名又比较 ...

  6. D3.js学习（五）

    上一节我们已经学习了如何设置填充区域,其实理解了他的实现原理还是非常简单了.这一节中, 我们主要学习多条曲线的绘制,以及给不同的曲线指定不同的纵坐标. 新的数据 由于我们要画两条曲线,所以我们要在原来 ...

  7. D3.js学习（四）

    上一节我们已经学习了线条样式和格栅的绘制,在这一节中我们将要根据之前绘制的线条对图表进行填充,首先来看一下我们的目标吧 在这个图表中,我们对位于线条下面的空间进行了填充,那么,如何改做到呢? 设置填充 ...

  8. D3.js学习（三）

    上一节中,我们已经画出了图表,并且给图表添加了坐标轴的标签和标题,在这一节中,我们将要学习几个绘制线条不同特性的几个函数,以及给图表添加格栅.ok,进入话题! 如何给线条设置绘制的样式? 这个其实非常 ...

  9. D3.js学习（一）

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

随机推荐

  1. ∑–△型模数转换器(ADC)简介

    ∑–△型模数转换器(ADC) 1.概述 近年来,随着超大规模集成电路制造水平的提高,Σ-Δ型模数转换器正以其分辨率高.线性度好.成本低等特点得到越来越广泛的应用.Σ-Δ型模数转换器方案早在20世纪60 ...

  2. UM_第三方登录

    参考官方文档(http://dev.umeng.com/social/ios/detail-share#7), 做出以下总结. 第三方登录主要用于简化用户登录流程,通过用户拥有的微博.QQ.微信等第三 ...

  3. Memcached(三)Memcached配置参数初解

    一.基本参数在我们第一次安装Memcached时,一般都是用过这个命令: memcached -m 512 -u root -d -l 127.0.0.1 -p 11211 我们先来解释这几个参数的含 ...

  4. python中的__init__ 、__new__、__call__等内置函数的剖析

    1.__new__(cls, *args, **kwargs)   创建对象时调用,返回当前对象的一个实例;注意:这里的第一个参数是cls即class本身2.__init__(self, *args, ...

  5. BZOJ 1003: [ZJOI2006]物流运输trans DP+最短路

    Description 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严格 ...

  6. 设计模式之装饰（Decorator）模式 代码详解

    /** * Created with IntelliJ IDEA. * User: HYY * Date: 13-10-27 * Time: 下午10:49 * To change this temp ...

  7. Android Mediaplayer各种属性和方法简单介绍

    主要涉及类:MediaPlayer (1) 当一个MediaPlayer对象被创建或者调用reset()方法之后,它处于空闲状态,调用release()方法后处于结束状态 1,一个MediaPlaye ...

  8. redis的图形界面管理工具：phpredisadmin

    大部分人都知道redis是一款用在缓存服务器上的软件,它与memcache类似,都可以存储海量的数据,用在大访问量的web网站.聊天记录存放等方面,但是又与memcache不同: 1.缓存数据可以持久 ...

  9. [YZOJ1579]&&[BZOJ2450]arr

    Description 给出3*n个数xi,要求构造三个长度为n的序列ai,bi,ci,使得满足下列条件: 1到3*n的每个数都在三个序列中的某个出现一次且仅一次: S=sum((x[ai]-x[bi ...

  10. 在Azure中使用Load Runner测试TCP最大并发连接数

    对于Azure中的每一台虚机,它所能支持的TCP最大并发连接数是50万(参考微软官网: http://azure.microsoft.com/en-us/documentation/articles/ ...