美文网首页
D3之比例尺

D3之比例尺

作者: D6K | 来源:发表于2017-11-09 21:08 被阅读62次

线性比例尺 Linear Scale

  1. d3.scale.linear() 创建线性比例尺
  2. linear.domain([]) 设置或获取定义域,支持分段形式
  3. linear.range([]) 设置或获取值域
  4. linear(x) 获取值域中与定义域中x对应的值
  5. linear.invert(y) 获取定义域中与值域中y对应的值
  6. linear.clamp([boolean]) 设置超出定义域值得处理方式,设置为true时,超出值将限定在值域内。
  7. linear.nice() 以较理想的方式调整定义域
  8. linear.ticks([count]) 选取坐标轴刻度
  9. linear.tickFormat(count,[format]) 设置刻度值得显示格式

例程

    var linear = d3.scale.linear()
                  .domain([0,20.304, 101])
                  .nice()
                  .range([0, 100, 1021])
                  .clamp(true);

    console.log(linear.domain(), linear.range());
    console.log(linear(2), linear(60), linear(120));
    console.log(linear.invert(50), linear.invert(600), linear.invert(1100));
    
    var ticks = linear.ticks(10);
    var tickFormat = linear.tickFormat(10, "%");
    console.log(ticks);
    console.log(tickFormat(ticks[2]));
线性比例尺

指数比例尺 Power Scale

  1. d3.sacle.pow() 定义指数比例尺
  2. exponent(number) 指定指数

例程

    var powerScale = d3.scale.pow()
                       .exponent(4)
                       .domain([0,10])
                       .range([0, 200]);
    console.log(powerScale(2), powerScale(5), powerScale(-2));
    console.log(powerScale.invert(3),powerScale.invert(200));
    console.log(powerScale.exponent()); 
指数比例尺

对数比例尺 Log Scale

  1. base([number]) 设置或获取底数

例程

    var logScale = d3.scale.log().base(2)
                     .domain([0.1, 10])
                     .range([-10, 20]);
    console.log(logScale(1), logScale(8),logScale(10));
    console.log(logScale.invert(-4),logScale.invert(12));
    console.log(logScale.base(),logScale.domain(),logScale.range());    
对数比例尺

相关文章

  • D3 v5 学习笔记-3 坐标轴概览

    D3中,比例尺和坐标轴是非常重要而且紧密相关的两个概念。 比例尺: D3的比例尺:https://g...

  • d3.js关于比例尺报Cannot read property

    在学习d3比例尺的时候关于比例尺报Cannot read property 'linear' of undefin...

  • 可视化D3.js库(6)-比例尺

    D3.js库-6-比例尺的使用 比例尺在D3中是一个非常实用的工具,可以这样理解比例尺:的关系,从domain映射...

  • D3.js scale比例尺介绍

    D3中为我们提供了比例尺模块。简单地说,比例尺就相当于是一个函数,让我们把一组定义域映射到值域。下面我就来介绍一下...

  • D3 - 连续比例尺

    Continuous Scales 比例尺是 D3 的重要概念, 用来代替使用像素表示大小. 实际上上一篇中在随机...

  • d3比例尺

    d3比例尺好比地图上的映射,偌大的世界可以缩小到一张很小的纸上,d3在作图的过程中,为了将数据映射展示到一张小小的...

  • D3之比例尺

    线性比例尺 Linear Scale d3.scale.linear() 创建线性比例尺 linear.domai...

  • D3常用比例尺整理

    本文主要是针对v4版本的一个整理,主要是用于自我学习,内容自D3中常用的比例尺转载 d3.scaleLinear(...

  • 地图的故事

    1、比例尺的表示方法:文字式、线段式、数字式 2、比例尺大小的比较:分母越大,比例尺越小;分母越小,比例尺越大。 ...

  • D3.js --- 第二章 比例尺与坐标轴

    4种常用的比例尺: 线性、序数、序数段、时间比例尺 d3.scaleLinear() //线性比例尺 如 [...

网友评论

      本文标题:D3之比例尺

      本文链接:https://www.haomeiwen.com/subject/ntimmxtx.html