一、定量比例尺

比例尺:就像函数一样,将一个量转换为另一个量,定义域到值域的转换。
每个比例尺都需要指定一个domain(定义域)range(值域)

定量比例尺:定义域是连续的。值域有连续的也有离散的。

1、线性比例尺(Linear Scale)

  • d3.scale.linear():创建一个线性比例尺。
  • linear(x):输入一个在定义域内的值x,返回值域内对应的值。
  • linear.invert(y) :输入值域,返回定义域
  • linear.domain([numbers]): 设定或获取定义域,最少放入两个数,也可以超过两个数,但domain和range的数量必须相等。
  • linear.range([values]):设定或获取值域,最少放入两个数,也可以超过两个数,但domain和range的数量必须相等。
  • linear.rangeRound([valuses]): 输出值会进行四舍五入的运算,结果是整数
  • linear.clamp([boolean]):默认被设置为false,当该比例尺接受一个超出定义域范围内的值时,依然能够按照同样的计算方法计算得到一个值,该值可能是超出值域范围的。设置为true时,任何超出值域范围的值,都会被收缩到值域范围内。
  • linear.nice([count]):将定义域的范围扩展成理想状态,例如对于[0.50000543,69.99997766]这样的定义域会自动将其变为[0,70].
  • linear.ticks([ticks]) :设定或获取定义域内具有代表性的值的数目。默认是10 ,主要用于选取坐标刻度
  • linear.ticksFormat(count,[format]): 设置定义域内具有代表的值的表示形式,如显示到小数点后两位,使用百分比的形式显示,主要用于坐标轴上。
var linear = d3.scale.linear()
                .domain([0,20])
                .range([0,100]);        
console.log( linear(10) );              //输出50
console.log( linear(30) );              //输出150
console.log( linear.invert(80) );              //输出16

linear.clamp(true);
console.log( linear(30) );              //输出100

linear.rangeRound([0,100]);
console.log( linear(13.33) );              //输出67,对结果进行了四舍五入

//使用nice之后,定义域变成了比较工整的形式,但是并不是四舍五入
linear.domain([0.12300000,0.4888888888]).nice();
console.log( linear.domain() );              //输出[0.1,0.5]
linear.domain([33.611111,45.97745]).nice();
console.log( linear.domain() );              //输出[33,46]
var linear = d3.scale.linear()
                .domain([-20,20])
                .range([0,100]);
var ticks = linear.ticks(5);
console.log(ticks);            //输出数组[-20,-10,0,10,20]

var tickFormat = linear.tickFormat(5,"+");//设定的格式为"+":表示如果是正数,则在前面添加一个加号,负数则添加一个减号。
for(var i=0;i<ticks.length;i++){
    ticks[i] = tickFormat(ticks[i]);
}
console.log(ticks);            //输出["-20","-10","+0","+10","+20"]

2、指数(Power Scale)和对数比例尺(Log Scale)

指数比例尺和对数比例尺的方法和线性比例尺一样,但指数比例尺多一个exponent(),对数比例尺多一个base(),两者都是用于指定底数。

var pow = d3.scale.pow().exponent(3);     //设置指数比例尺的指数为3
console.log( pow(2) );        //输出为8
console.log( pow(3) );        //输出为27

pow.exponent(0.5);
console.log( pow(2) );        //输出为1.414
console.log( pow(3) );        //输出为1.732
//指定domain和range
//指数比例尺
var pow = d3.scale.pow()
                .exponent(3)
                .domain([0,3])          //指数比例尺内部调用了线性比例尺,而且把这个线性比例尺
                .range([0,90]);         //定义域的边界变为了其指定的次方。即定义域为[0,27]   
//线性比例尺
var linear = d3.scale.linear()
                .domain([0,Math.pow(3,3)])
                .range([0,90]);
console.log( pow(1.5) );        //输出为11.25
console.log( linear(Math.pow(1.5,3)) );    //输出为11.25

3、量子(Quantize Scale)和分位比例尺(Quantile Scale)

  • 量子比例尺
    定义域是连续的,值域是离散的。例如:定义域:[0,10],值域:["red","green","blue","yellow", "black"],使用量子比例尺之后,定义域被分割为5段,每一段对应值域的一个值,[0,2)对应red,[2,4)对应green,依此类推,所以量子比例尺很适合处理类似“数值对应颜色”的问题。
var quantize = d3.scale.quantize()
                .domain([50,0])
                .range(["#888","#666","#444","#222","#000"]);
  • 分位比例尺
    与量子比例尺类似,也是用于将连续的定义域区域分成段,每段对应到一个离散的值上,不同的是分段处的值量子比例尺的分段值只与定义域的起始值和结束值有关,其中间有多伤其他数值都没有影响,分段值取其算数平均值分位比例尺的分段值与定义域中存在的数值都有关,可使用quantile.quantiles()查询分位比例尺的分段值。
var quantize = d3.scale.quantize().domain([0,2,8,10]).range([1,100]),   //[0,5)对应1,[5,10]对应100
    quantile = d3.scale.quantile().domain([0,2,4,10]).range([1,100]);//[0,3)对应1,[3,10]对应100

console.log( quantize(4.99) );//量子比例尺,输出1
console.log( quantize(5) );//量子比例尺,输出100
console.log( quantile(2.99) );//分位比例尺,输出1
console.log( quantile(3) );//分位比例尺,输出100

4、阈值比例尺

阈值比例尺:通过设定阈值,将连续的定义域映射到离散的值域里,

//该阈值比例尺定义了三个阈值:10、20、30,则空间被划分为四段:负无穷到10,10到20,20到30,30到正无穷
var threshold = d3.scale.threshold()
                .domain([10,20,30])
                .range(["red","green","blue","black"]);
                
console.log( threshold(5) );                   //输出red
console.log( threshold(15) );                 //输出green
console.log( threshold(25) );                 //输出blue
console.log( threshold(35) );                 //输出black

console.log( threshold.invertExtent("red") );                   //输出[undefined,10]
console.log( threshold.invertExtent("green") );                 //输出[10,20]
console.log( threshold.invertExtent("blue") );                  //输出[20,30]
console.log( threshold.invertExtent("black") );                 //输出[30,undefined]
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 线性比例尺 Linear Scale d3.scale.linear() 创建线性比例尺 linear.domai...
    D6K阅读 1,201评论 0 0
  • 序数比例尺的定义域和值域都是离散的。,如果需要通过输入一些离散的值得到另一些离散的值,这时候就要考虑序数比例尺。 ...
    陆lmj阅读 1,232评论 1 0
  • 比例尺是用来映射值域(真实值)和画布(svg)之间对应关系的工具。 比例尺分为线性比例尺,d3.scale.lin...
    Kenis阅读 402评论 0 0
  • 产品名:晒厨易(APP) 一句话描述:一款教分步做高质量西餐的APP 一 产品介绍 1 适用用户:追求做高质量西餐...
    远歌Sofi阅读 1,650评论 0 0