// d3中的比例尺也有定义域和值域,分别是domain和range,开发者需要指定domain和range的范围,如此即可以得到一个计算关系;
// 线性比例尺:能将一个连续的区间映射到另一区间,要解决柱形图宽度的问题,就需要线性比例尺;
// 如:
var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
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
// 序数比例尺:定义域和值域不一定是连续的
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

d3里的比例尺的更多相关文章

  1. D3.js系列——比例尺和坐标轴

    比例尺是 D3 中很重要的一个概念.绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题. 一.为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 ...

  2. D3比例尺

    D3中有个重要的概念就是比例尺.比例尺就是把一组输入域映射到输出域的函数.映射就是两个数据集之间元素相互对应的关系.比如输入是1,输出是100,输入是5,输出是10000,那么这其中的映射关系就是你所 ...

  3. D3.js 比例尺的使用

    比例尺是 D3 中很重要的一个概念,直接用数值的大小来代表像素不是一种好方法 一.为什么需要比例尺 制作一个柱形图,会有一个数组:var dataset = [ 250 , 210 , 170 , 1 ...

  4. D3.js 让图表动起来

    D3 支持制作动态的图表.有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感. 一.什么是动态效果 绘制完成后不再发生变化的,这是静态的图表. 动态的图表,是指图表 ...

  5. svg操纵方案 基于 D3 还是 angular?

    之前还是想简单了, 现在重新写这篇.把逻辑拆分粒度的辨析,放到外面去. 问题提出:svg控制方案 基于 D3 还是 angular 根据这个,html 4种展现样式:普通的html,svg,2D ca ...

  6. 初识 D3.js :打造专属可视化

    一.前言 随着现在自定义可视化的需求日益增长,Highcharts.echarts等高度封装的可视化框架已经无法满足用户各种强定制性的可视化需求了,这个时候D3的无限定制的能力就脱颖而出. 如果想要通 ...

  7. d3.js读书笔记-2

    比例尺 比例尺基本内容 比例尺是一组把输入域映射为输出范围的函数.任意数据集中的值不可能恰好与图表中的像素尺度一一对应.比例尺就是把这些数据值映射为可视化图形中使用的新值的便捷手段.D3的比例尺就是那 ...

  8. D3.js 入门学习(一)

    一.安装D3.js 1.网络连接 <script src="https://d3js.org/d3.v4.min.js"></script> 2.命令行安装 ...

  9. d3.event=null

    d3功能奇多, 已经模块化,(其实感觉和react差不多了). 所以默认打包的单个文件 <script src="https://d3js.org/d3.v5.min.js" ...

随机推荐

  1. 简单总结下opacity、transparent以及rgba

    这几个概念最开始学的时候只是有个大致印象,现在复习这部分的知识点,发现不仔细区分一下,还真有点混乱. 三者共同点是都和透明有关.先分着来说一下: 1.opacity用来设置元素的不透明级别,从 0.0 ...

  2. react-router那些事儿

    切换路由时,控制台警告 Can Only update a mounted or mounting component.this usually means you called setState() ...

  3. 全球第一款纯数据GPRS模块 有方M590 概述

    更多精彩请到http://blog.tuzhuke.info/?cat=30 M590为全球第一款纯数据GPRS模块,专注数据收发功能,GPRS数据以及短信数据.没有电话语音功能,可以能够拨打或者接听 ...

  4. KTV项目之3个ListView的跳转和加载歌手图片

    第一个ListView: 第二个ListView: 第三个ListView: 定义一个KTVUtil类,在里面定义一个静态变量保存歌手图片 //定义一个静态变量保存歌手图片路径 public stat ...

  5. bzoj3255 一个关于序列的游戏

    题意是啥 给你一个数列,可以任意删去一段,记其长度为$s$,得到$val_s$的价值,问你最大价值和为多少.. 其中这一段数要满足成一个上凸且相邻数差为$1$ 显然,删掉一段数后剩下的左右会相邻.. ...

  6. chrome浏览器下载内容存放位置

    点击: 或者直接快捷键 ctrl +J 打开下载的资料在[设置]中可将浏览器设置成默认浏览器,更换下载内容的存放位置:给一个提示,本人未曾修改下载的存放位置,是用户/Administrator/Dow ...

  7. 定位bug的方法总结

    把问题聚焦到某一个点上,而不是焦躁的瞎搞,这样效率极低 1,看改动的地方 2,看文档:官方文档或者接口文档. 3,google不到的话,也试试百度中文搜索. 4,看格式反常的地方 5,反思 反常的地方 ...

  8. Oracle数据库访问其他用户下的表,不加表所属的用户名的实现方法

    一. 问题: 如何实现在Oracle数据库中访问其他用户的表时不需加表所属的用户名 二. 举例: Oracle里面的用户A,要访问用户B的表需要带用户B的前缀,如访问用户B的 TEST表,需要这样访问 ...

  9. C/JS_实现冒泡排序

    冒泡排序算法的运作如下:(从后往前) 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 针对所 ...

  10. JS_高程6.面向对象的程序设计(2)创建对象_2 构造函数也是一般函数

    1.构造函数也是一般函数,以下创建一个构造函数. var Person=function(name,age,job){ this.name=name; this.age=age; this.job=j ...