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" ...
随机推荐
- angular笔记_7
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 关闭VS2015的WPF UI调试工具
VS菜单: 工具 > 选项 > 调试 > 常规 > 启用Xaml 的UI调试工具.把勾勾去掉.
- BZOJ.3926.[ZJOI2015]诸神眷顾的幻想乡(广义后缀自动机)
题目链接 要对多个串同时建立SAM,有两种方法: 1.将所有串拼起来,中间用分隔符隔开,插入字符正常插入即可. 2.在这些串的Trie上建SAM.实际上并不需要建Trie,还是只需要正常插入(因为本来 ...
- BZOJ.1568.[JSOI2008]Blue Mary开公司(李超线段树)
题目链接 线段树每个节点记录\(f(mid)\)最大的直线(在\(mid\)处函数值最大的直线),称作优势线段(还是直线啊...无所谓了). 如果是在区间插入线段会影响\(O(\log n)\)个区间 ...
- 洛谷.3369.[模板]普通平衡树(Splay)
题目链接 第一次写(2017.11.7): #include<cstdio> #include<cctype> using namespace std; const int N ...
- nodejs内存溢出解决方法
解决方案一:通过 package.json 加大内存,用nodemon启动的 node --v8-options | grep max-ol nodemon启动的文件:/bin/bash -c &q ...
- 老毛桃UEFI版u盘启动盘
使用老毛桃制作UEFI启动盘 下载UEFI版本启动盘制作工具,打开官方网站http://www.laomaotao.org,当前显示页面右下下载UEFI版本.文章写作时最新版本为9.3. 使用教程见: ...
- 3ds max学习笔记-- 复合对象运算
1,ProBoolean(超级布尔) 栗子: 新建一长方体,两个圆柱体,如下: 选择底部长方体,进入[复合对象],修改[操作],单击[拾取操作对象B],点击圆柱: 效果如下,线面较多: 高级布尔效果图 ...
- Java基础知识总结--String、StringBuffer、StringBuilder
1.Java String 类 String类是final类,也即意味着String类不能被继承,并且它的成员方法都默认为final方法.在Java中,被final修饰的类是不允许被继承的,并且该类中 ...
- 论文泛读:Click Fraud Detection: Adversarial Pattern Recognition over 5 Years at Microsoft
这篇论文非常适合工业界的人(比如我)去读,有很多的借鉴意义. 强烈建议自己去读. title:五年微软经验的点击欺诈检测 摘要:1.微软很厉害.2.本文描述了大规模数据挖掘所面临的独特挑战.解决这一问 ...