美文网首页
D3.js scale比例尺介绍

D3.js scale比例尺介绍

作者: CBDxin | 来源:发表于2020-03-13 22:03 被阅读0次

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

1.d3.scaleLinear() 线性比例尺

scaleLinear会将一组线性的定义域映射到一组线性的值域当中。每个值域中的值y可以表示为定义域中的值x的函数:y = mx + b。使用d3.scaleLinear()创造一个线性比例尺,利用domain()设置定义域,range()函数定义值域。
用法:

let scale = d3.scaleLinear()
.domain([0,10]) //设置1-5的线性定义域
.range([0,100])//设置0-100的线性值域

scale(0)  //0
scale(2) //20

映射关系:


scaleLinear.png

2.d3.scaleBand() 序数比例尺

scaleBand会将一组离散的定义域映射到一组线性的定义域中,根据定义域中的值将值域分割为几个均匀的分段,并返回分段中的第一个值。
用法:

let scale = d3.scaleBand()
  .domain([1,2,3,4])
  .range([0,100])

scale(1) //0
scale(2) //25

映射关系:


scaleBand.png

3.d3.scaleQuantize()量化比例尺

scaleQuantize会将一组连续的定义域映射到一组离散的值域中,根据值域中的值数,将连续的定义域域划分为几个均匀的分段。每个值域的值y可以表示为定义域的值x的量化线性函数:y = m round(x) + b。
用法:

let color = d3.scaleQuantize()
    .domain([0, 1])
    .range(["brown", "steelblue"]);

color(0.49); // "brown"
color(0.51); // "steelblue"

映射关系:


scaleQuantize.png

相关文章

  • D3.js scale比例尺介绍

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

  • D3之比例尺

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

  • D3系列07-比例尺

    比例尺是用来映射值域(真实值)和画布(svg)之间对应关系的工具。 比例尺分为线性比例尺,d3.scale.lin...

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

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

  • d3.js 基础 - 一个数据可视化相关的 javascript

    2016-04-07 本文谈谈 d3 中的数据绑定、scale、坐标轴。 一、d3.js 介绍 1. d3 是什么...

  • 控件 Control

    Zoom 缩放控件 Attribution 右下角文本信息 Layers 图层控件 Scale 比例尺控件

  • 利用D3.js绘制雷达图

    d3.js绘制雷达图,如果各个指标维度的比例尺一致,相对容易,主要难点在于多个维度的比例尺不统一的情况下,如何绘制...

  • 大规模敏捷-LeSS

    Large-Scale Scrum,LeSS 官网介绍Overview - Large Scale Scrum (...

  • D3.js颜色插值

    在使用d3.js根据数值映射到颜色的过程中,我遇到的有两种情况:一:数值跨度不大,变化幅度小,可以根据线性比例尺映...

  • Agisoft PhotoScan-中级教程-编码目标和比例尺

    本教程演示如何在PhotoScan Professional中使用编码目标进行坐标系或比例尺定义。 还介绍了比例尺...

网友评论

      本文标题:D3.js scale比例尺介绍

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