zoukankan      html  css  js  c++  java
  • d3.js 线性比例尺

             var linear = d3.scale.linear()  //设置为线性比例尺
                            .domain([0,20])  //设置定义域为[0,20]   
                            .range([0,100]); //设置值域为[0,100]
    
            console.log(linear(10));
            console.log(linear(30));
            console.log(linear.invert(80));  //输入值域的值返回定义域的值
    
            //默认false,当比例尺接收一个超出定义域范围的值时,依然按同样方法计算出一个可能超出值域范围的值,如歌设置为true,任何超出值域范围的值,都会缩小到值域范围内。
            linear.clamp(true);              
            console.log(linear(30));
    
            //可对输出的数值进行四舍五入 rangeRound
            linear.rangeRound([0,100]) 
            console.log(linear(13.33)); //输出67
    
            // 定义域中有无穷小数,可用nice()
            linear.domain([33.6111111111111,45.22222222]).nice()
            console.log(linear.domain()); //输出[33,46]
    
            // ticks 和 tickFormat() 主要用在坐标轴上的
            var linear = d3.scale.linear()  //设置为线性比例尺
                            .domain([-20,20])  //设置定义域为[0,20]   
                            .range([0,100]); //设置值域为[0,100]
            var ticks = linear.ticks(5);
            console.log(ticks); //输出 [-20,-10,0,10,20]
            //tickFormat() 返回值是一个函数,因此调用时要使用函数的调用方式,此处设置的为 "+" 表示正负数  
            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"]

  • 相关阅读:
    移动布局---1. 移动端布局基础
    1. CSS新特性之选择器
    1. H5新增语义化标签
    POJ 3281
    poj 1986
    POJ 3728
    poj 2763
    poj 2749
    uva 11294
    LA 3713
  • 原文地址:https://www.cnblogs.com/webmc/p/11076844.html
Copyright © 2011-2022 走看看