d3里的比例尺
// 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里的比例尺的更多相关文章
- D3.js系列——比例尺和坐标轴
比例尺是 D3 中很重要的一个概念.绘制图形时直接用数值的大小来代表像素不是一种好方法,本章正是要解决此问题. 一.为什么需要比例尺 上一章制作了一个柱形图,当时有一个数组,绘图时,直接使用 250 ...
- D3比例尺
D3中有个重要的概念就是比例尺.比例尺就是把一组输入域映射到输出域的函数.映射就是两个数据集之间元素相互对应的关系.比如输入是1,输出是100,输入是5,输出是10000,那么这其中的映射关系就是你所 ...
- D3.js 比例尺的使用
比例尺是 D3 中很重要的一个概念,直接用数值的大小来代表像素不是一种好方法 一.为什么需要比例尺 制作一个柱形图,会有一个数组:var dataset = [ 250 , 210 , 170 , 1 ...
- D3.js 让图表动起来
D3 支持制作动态的图表.有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感. 一.什么是动态效果 绘制完成后不再发生变化的,这是静态的图表. 动态的图表,是指图表 ...
- svg操纵方案 基于 D3 还是 angular?
之前还是想简单了, 现在重新写这篇.把逻辑拆分粒度的辨析,放到外面去. 问题提出:svg控制方案 基于 D3 还是 angular 根据这个,html 4种展现样式:普通的html,svg,2D ca ...
- 初识 D3.js :打造专属可视化
一.前言 随着现在自定义可视化的需求日益增长,Highcharts.echarts等高度封装的可视化框架已经无法满足用户各种强定制性的可视化需求了,这个时候D3的无限定制的能力就脱颖而出. 如果想要通 ...
- d3.js读书笔记-2
比例尺 比例尺基本内容 比例尺是一组把输入域映射为输出范围的函数.任意数据集中的值不可能恰好与图表中的像素尺度一一对应.比例尺就是把这些数据值映射为可视化图形中使用的新值的便捷手段.D3的比例尺就是那 ...
- D3.js 入门学习(一)
一.安装D3.js 1.网络连接 <script src="https://d3js.org/d3.v4.min.js"></script> 2.命令行安装 ...
- d3.event=null
d3功能奇多, 已经模块化,(其实感觉和react差不多了). 所以默认打包的单个文件 <script src="https://d3js.org/d3.v5.min.js" ...
随机推荐
- ppt标签打开文件 word标签打开文件 窗口打开文件 粘贴默认方式
ppt标签打开文件 word标签打开文件 word窗口打开文件 ppt粘贴默认方式 word粘贴默认方式 ppt粘贴默认方式 只保留文本 == 通过 视图 切换窗口. == 层叠 样式 如下. == ...
- 2111 ACM 贪心 水题
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2111 题意:知道背包容量和物品单价.体积.问能买到的最大价值? 注意:单价指的是单位体积的价格 思路:先把 ...
- Ubuntu安装python3虚拟环境
大多数Linux自带python2.7,而Ubuntu1.6也自带python3.x,本文章主要记录virtualenv+vitualenvwrapper使用python3虚拟环境 虚拟环境好处不多说 ...
- C# 网络编程之基于SMTP发送电子邮件
本文主要讲述基于C#网络编程的发送邮件的编程,邮件发送功能是基于邮件协议的,常见的电子邮件协议有SMTP(简单邮件传输协议).POP3(邮局协议).IMAP(Internet邮件访问协议),文章主要 ...
- (转)JavaWeb学习之Servlet(二)----Servlet的生命周期、继承结构、修改Servlet模板
[声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4140466.html 一.http协议回顾: 在上一篇文章中:JavaW ...
- [Vijos1532]区间 (差分约束)
又是一题我不会的模板题…… 讲一下差分约束吧 差分约束 参考博客 如果一个系统由n个变量和m个约束条件组成,形成m个形如ai-aj≤k的不等式(i,j∈[1,n],k为常数),则称其为差分约束系统.— ...
- 疫情控制 [NOIP2012]
Description H 国有 n 个城市,这 n 个城市用 n-1 条双向道路相互连通构成一棵树, 1 号城市是首都, 也是树中的根节点. H 国的首都爆发了一种危害性极高的传染病.当局为了控制疫 ...
- 3ds max 学习笔记(四)--创建物体
添加物体: 1.初创建物体,从单视图进行创建,便于处于同一平面,在透视图观看效果.2.在基本对象处选择“长方体”:左键开始制作,松开左键此时控制的是长方形的高,然后点击左键完成:注:在max里点击右键 ...
- Java中的RASP实现
RSAP RASP是Gartner公司提出的一个概念,称:程序不应该依赖于外部组件进行运行时保护,而应该自身拥有运行时环境保护机制: RASP就是运行时应用自我保护(Runtime applicati ...
- CSS魔法堂:Transition就这么好玩
前言 以前说起前端动画必须使用JS,而CSS3为我们带来transition和@keyframes,让我们可以以更简单(声明式代替命令式)和更高效的方式实现UI状态间的补间动画.本文为近期对Tran ...