比例尺是 D3 中很重要的一个概念，直接用数值的大小来代表像素不是一种好方法

一、为什么需要比例尺

　　制作一个柱形图，会有一个数组：var dataset = [ 250 , 210 , 170 , 130 , 90 ];

　　绘图时，直接使用 250 给矩形的宽度赋值，即矩形的宽度就是 250 个像素。此方式非常具有局限性，如果数值过大或过小，例如：

　　　　var dataset_1 = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
　　　　var dataset_2 = [ 2500, 2100, 1700, 1300, 900 ];

　　对以上两个数组，绝不可能用 2.5 个像素来代表矩形的宽度，那样根本看不见；也不可能用 2500 个像素来代表矩形的宽度，因为画布没有那么长。

　　于是，我们需要一种计算关系，能够：将某一区域的值映射到另一区域，其大小关系不变。这就是比例尺（Scale）。

　　　　

　　　　

二、有哪些比例尺

　　比例尺，很像数学中的函数。例如，对于一个一元二次函数，有 x 和 y 两个未知数，当 x 的值确定时，y 的值也就确定了。

　　在数学中，x 的范围被称为定义域，y 的范围被称为值域。

　　D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。开发者需要指定 domain 和 range 的范围，如此即可得到一个计算关系。

　　D3 提供了多种比例尺，下面介绍最常用的两种。

　　

　　1、线性比例尺

　　　　线性比例尺，能将一个连续的区间，映射到另一区间。要解决柱形图宽度的问题，就需要线性比例尺。假设有以下数组：var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];　　

　　　　现有要求如下：

　　　　将 dataset 中最小的值，映射成 0；将最大的值，映射成 300。

var min = d3.min(dataset);

var max = d3.max(dataset);

var linear = d3.scale.linear()

        .domain([min, max])

        .range([0, 300]);

linear(0.9);    //返回 0

linear(2.3);    //返回 175

linear(3.3);    //返回 300

　　　　其中，d3.scale.linear() 返回一个线性比例尺。domain() 和 range() 分别设定比例尺的定义域和值域。在这里还用到了两个函数，它们经常与比例尺一起出现：

      • d3.max()
      • d3.min()

　　　　这两个函数能够求数组的最大值和最小值，是 D3 提供的。按照以上代码，

　　　　比例尺的定义域 domain 为：[0.9, 3.3]

　　　　比例尺的值域 range 为：[0, 300]

　　　　因此，当输入 0.9 时，返回 0；当输入 3.3 时，返回 300。当输入 2.3 时呢？返回 175，这是按照线性函数的规则计算的。　　　

　　　　有一点请大家记住：

　　　　　　d3.scale.linear() 的返回值，是可以当做函数来使用的。因此，才有这样的用法：linear(0.9)。

　　2、序数比例尺

　　　　有时候，定义域和值域不一定是连续的。例如，有两个数组：

　　　　　　var index = [0, 1, 2, 3, 4];
　　　　　　var color = ["red", "blue", "green", "yellow", "black"];

　　　　我们希望 0 对应颜色 red，1 对应 blue，依次类推。

　　　　但是，这些值都是离散的，线性比例尺不适合，需要用到序数比例尺。

var ordinal = d3.scale.ordinal()

        .domain(index)

        .range(color);

ordinal(0); //返回 red

ordinal(2); //返回 green

ordinal(4); //返回 black

三、给柱形图添加比例尺

<body>  

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

    <script>

    var width = 300;    //画布的宽度

    var height = 300;    //画布的高度

    var svg = d3.select("body")                //选择文档中的body元素

                .append("svg")                //添加一个svg元素

                .attr("width", width)        //设定宽度

                .attr("height", height);    //设定高度

    var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];

    var linear = d3.scale.linear()

                    .domain([0, d3.max(dataset)])

                    .range([0, 250]);

    var rectHeight = 25;    //每个矩形所占的像素高度(包括空白)

    svg.selectAll("rect")

          .data(dataset)

          .enter()

          .append("rect")

          .attr("x",20)

          .attr("y",function(d,i){

                return i * rectHeight;

          })

          .attr("width",function(d){

                   return linear(d);//在这里用比例尺

          })

          .attr("height",rectHeight-2)

          .attr("fill","steelblue");

    </script>  

</body>

D3.js 比例尺的使用的更多相关文章

  1. D3.js比例尺 序数比例尺(v3版本)

    上一章介绍了阈值比例尺:https://www.cnblogs.com/littleSpill/p/10825038.html.到目前所有的定量比例尺已经介绍完了. 现在给大家介绍一下序数比例尺. 定 ...

  2. D3.js比例尺 定量比例尺 之 线性比例尺(v3版本)

    定量比例尺 : 数学上有函数的概念,不是编程中所说的函数,如线性函数.指数函数.对数函数等,而指的是一个量随着另一个量的变化而变化.例如有一下线性函数 : y=2x+1该函数在二维坐标系中绘制出来的图 ...

  3. D3.js的v5版本入门教程（第七章）—— 比例尺的使用

    D3.js的v5版本入门教程(第七章) 比例尺在D3.js中是一个很重要的东西,我们可以这样理解d3.js中的比例尺——一种映射关系,从domain映射到range域(为什么会是domain和rang ...

  4. D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)

    现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有 ...

  5. 【 D3.js 视频系列 】 飞速入门

    本教程共包含 6 个视频,目的是为了帮助初学者快速入门,以便阅读本站其他文章. 本教程的名称为"飞速入门",是为初学者准备的,其中包括了 D3 开发中最基础的知识.对 D3 掌握得 ...

  6. 【 D3.js 高级系列 — 6.0 】 值域和颜色

    在[入门 - 第 10 章]作了一张中国地图,其中各省份的颜色值都是随意赋值的.如果要将一些值反映在地图上,可以利用颜色的变化来表示值的变化. 1. 思路 例如,有值域的范围为: [10, 500] ...

  7. 【 D3.js 高级系列 — 3.0 】 堆栈图

    堆栈图布局(Stack Layout)能够计算二维数组每一数据层的基线,以方便将各数据层叠加起来.本文讲解堆栈图的制作方法. 先说说什么是堆栈图. 例如,有如下情况: 某公司,销售三种产品:个人电脑. ...

  8. 【 D3.js 高级系列 — 2.0 】 捆图

    捆图(Bundle)是 D3 中比较奇特的一个布局,只有两个函数,而且需要与其它布局配合使用.本文讲述捆图的制作方法. 有关捆图的例子极少,很容易找到的是:http://bl.ocks.org/mbo ...

  9. 【 D3.js 进阶系列 — 5.0 】 直方图

    直方图用于描写叙述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据. 假设有数组 a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ],如今把10~2 ...

随机推荐

  1. c# 财务数据编号的生辰

    实现逻辑: 根据票号前戳+生成的6位数据编号=收据号(010+000001=010000001) 作废票号      将票号作废,插入到编号表中,以此下次在使用 作废票号使用 编号表中 现在只有2,当 ...

  2. 2015-09-17 001 存储过程数据操作类 H_data_Helper

    using System;using System.Data;using System.Configuration;using System.Linq;using System.Web;using S ...

  3. servlet中Java连接数据库后的基本操作

    servlet中Java连接数据库后的基本操作 在eclipse中新建一个工程:login 在Server中新建一个服务器,基本的操作不用说了,在前两天的笔记中可以找到; 需要知道数据库的用户名和密码 ...

  4. C#中通过三边长判断三角形类型（三角形测试用例）

    对于<编程之美>P292上关于三角形测试用例的问题,题目是这样的: 输入三角形的三条边长,判断是否能构成一个三角形(不考虑退化三角形,即面积为零的三角形),是什么样的三角形(直角.锐角.钝 ...

  5. 对torch的一点感想

    torch是一个基于LuaJIT的科学计算框架,知乎上有个人回答说torch比较适合科研用途, torch与matlab的很多函数很相似

  6. 修改idea的运行内存

    1.如果本地的jdk是32位的,那么最大的内存只能支持到1024 2.测试jdk位数 public class Test { public static void main(String[] args ...

  7. 关于MYSQL group by 分组按时间取最大值的实现方法！

    类如 有一个帖子的回复表,posts( id , tid , subject , message , dateline ) , id 为 自动增长字段, tid为该回复的主题帖子的id(外键关联), ...

  8. Storm系列之三——Fault Tolerance

    本文介绍Storm容错的设计细节. 1.当一个worker进程死了会发生什么? 当worker死了,supervisor会重启它.如果它尝试开启多次失败并且不能与nimbus发送心跳,Nimbus会重 ...

  9. ubuntu安装StarDict星际译王

    http://sixipiaoyang.blog.163.com/blog/static/6232358820144146386437/ 1,安装StarDict星际译王. 这是linux系统中最常用 ...

  10. 配置Python+selenium+firefox自动化测试

    1.安装python.默认安装 2.安装pip.下载pip-1.5.4包,解压pip-1.5.4,放在C盘,进入pip目录-->键入命令:python setup.py install  再进入 ...