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" ...
随机推荐
- Xamarin Essentials教程获取路径文件系统FileSystem
Xamarin Essentials教程获取路径文件系统FileSystem 文件系统用于管理设备内的各类文件.通过文件系统,应用程序可以创建永久文件和临时文件,也可以获取预先打包的文件,如预设数据库 ...
- BZOJ.3170.[TJOI2013]松鼠聚会(切比雪夫距离转曼哈顿距离)
题目链接 将原坐标系每个点的坐标\((x,y)\)变为\((x+y,x-y)\),则原坐标系中的曼哈顿距离等于新坐标系中的切比雪夫距离. 反过来,将原坐标系每个点的坐标\((x,y)\)变为\((\f ...
- Android文件数据存储
利用Shared Preference或者数据库来存储应用程序数据是一种好的做法,但有时可能仍然希望直接使用文件,而不是依赖于Android的管理机制:尤其是使用多媒体文件的时候. Android提供 ...
- BZOJ2319 : 黑白棋游戏
将01串按1分段,那么分析可得长度为$a$的段拼上长度为$b$的段的SG值为$a-[a\leq b]$. 设$f[i][j][k][l]$表示从后往前用了$i$个1,$j$个0,当前段长度为$k$,后 ...
- Node爬取简书首页文章
Node爬取简书首页文章 博主刚学node,打算写个爬虫练练手,这次的爬虫目标是简书的首页文章 流程分析 使用superagent发送http请求到服务端,获取HTML文本 用cheerio解析获得的 ...
- day4函数文件操作
一.高效读取文件 1.使用with打开文件,程序运行完后会自动关闭打开的文件 2.修改文件,将文件中的123替换为a(简单粗暴方式) 3.打开两个文件,修改后将旧文件删除,将新文件名字改成旧文件的名称 ...
- WebApi路由解析增加版本控制
1.自定义路由解析类 public class VersionHttpControllerSelector : IHttpControllerSelector { private const stri ...
- Intellij IDEA使用Docker插件部署应用
1.安装Docker插件 配置Docker Api,在API URL中填入api的地址,记得Docker后台程序启动是要配置 -H tcp://0.0.0.0:2375 开放远程地址端口,注意这里的i ...
- java内存配置举例
常见配置举例 堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~ ...
- JS_高程5.引用类型(2)Array类型
Array类型: ECMAScript数组的每一项可以保存任何类型的数据,数组的大小是可以动态调整的. 创建数组的基本方式: (1)使用Array构造函数 var color=new Array(); ...