• 比例尺---定量比例尺


    比例尺:就像函数一样,将一个量转换为另一个量,定义域到值域的转换。
    每个比例尺都需要指定一个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]
  • 相关阅读:
    nsq main里面golang多个协程管理写法
    关于centos压测的问题
    Jaeger全链路go实现,包含http和消息队列的链式传递
    mstsc远程报:这可能是由于CredSSP 加密Oracle修正的两种完美解决方法
    Axure9:一键复制Iconfont图标到Axure的插件安装
    Axure9:导入阿里云DataV.GeoAtlas矢量地图到Axure
    Axure:编辑技巧:拖动复制、编组、组内选中、穿透选中、选中模式
    Axure学习一:打开软件,预览和生成HTML原型、安装Chrome插件
    Axure RP授权码
    vm 安装rethat和centos
  • 原文地址:https://www.cnblogs.com/lmjZone/p/7739239.html
Copyright © 2020-2023  润新知