阅读 281

【d3js】 d3js 比例尺

这是我参与8月更文挑战的第13天,活动详情查看:8月更文挑战

前言

大家通过之前一篇小demo沿着圆运动动画, 可能会对d3js产生了兴趣, 接下来咱们继续学习他的常用api, 针对这些api 我会输出一些自己的理解,如果理解有误,期望大家及时指出😁

比例尺

介绍什么是比例尺?

d3比例尺, 比例尺就是把一组输入domain域映射到输出域的range函数方法。比如输入是1,输出是10,输入是'Tom',输出是50,那么这其中的映射关系就是你所定义的比例尺。

d3比例尺有哪些?

  1. d3.scaleLinear() 线性比例尺
  2. d3.scaleBand() 序数比例尺
  3. d3.scaleOrdinal() 序数比例尺
  4. d3.scaleQuantize() 量化比例尺
  5. d3.scaleTime() 时间比例尺
  6. 颜色比例尺d3.schemeCategory10/d3.schemeCategory20/d3.schemeCategory20b/d3.schemeCategory20c
  7. d3.scaleIdentity() // 恒等比例尺
  8. d3.scaleSqrt() // 乘方比例尺
  9. d3.scalePow() // 类似scaleSqrt的乘方比例尺
  10. d3.scaleLog() // 对数比例尺
  11. d3.scaleQuantile() // 分位数比例尺

d3.scaleLinear()

d3.scaleLinear()api是怎么使用的呢?看下面的示例吧!!!!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
   const scale = d3.scaleLinear().domain([0,5]).range([0,100]);
   console.log(scale(0));
   console.log(scale(1));
   console.log(scale(2));
   console.log(scale(3));
   console.log(scale(4));
   console.log(scale(5));

   //输出:0
   //输出:20
   //输出:40
   //输出:60
   //输出:80
   //输出:100


   //接下来咱们再尝试下再咱们定义的范围外的呢?
   console.log(scale(6)); 
   console.log(scale(7));
   console.log(scale(8));
   console.log(scale(9));
   console.log(scale(10));

   //输出:120
   //输出:140
   //输出:160
   //输出:180
   //输出:200
</script>
复制代码

接下来咱们再尝试下其他的方法还是用d3.scaleLinear()为例

更改domain的参数,是否会有改变呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
   const scale = d3.scaleLinear().domain([0,1,2,3,4,5]).range([0,100]);
   console.log(scale(0));
   console.log(scale(1));
   console.log(scale(2));
   console.log(scale(3));
   console.log(scale(4));
   console.log(scale(5));

   //输出:0
   //输出:100
   //输出:200
   //输出:300
   //输出:400
   //输出:500


   //接下来咱们再尝试下再咱们定义的范围外的呢?
   console.log(scale(6)); 
   console.log(scale(7));
   console.log(scale(8));
   console.log(scale(9));
   console.log(scale(10));

   //输出:600
   //输出:700
   //输出:800
   //输出:900
   //输出:1000
</script>
复制代码

再更改一下range的参数呢?咱们尝试下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
   const scale = d3.scaleLinear().domain([0,1,2,3,4,5]).range([0, 100, 300, 600, 800]);
   console.log(scale(0));
   console.log(scale(1));
   console.log(scale(2));
   console.log(scale(3));
   console.log(scale(4));
   console.log(scale(5));

   //输出:0
   //输出:100
   //输出:300
   //输出:600
   //输出:800
   //输出:1000


   //接下来咱们再尝试下再咱们定义的范围外的呢?
   console.log(scale(6)); 
   console.log(scale(7));
   console.log(scale(8));
   console.log(scale(9));
   console.log(scale(10));

   //输出:1200
   //输出:1400
   //输出:1600
   //输出:1800
   //输出:2000
</script>
复制代码

再更改下参数呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
   const scale = d3.scaleLinear().domain([0,1,2,3,4,5]).range(['a', 'b']);
   console.log(scale(0));
   console.log(scale(1));
   console.log(scale(2));
   console.log(scale(3));
   console.log(scale(4));
   console.log(scale(5));

   //输出:b
   //输出:b
   //输出:b
   //输出:b
   //输出:b
   //输出:b


   //接下来咱们再尝试下再咱们定义的范围外的呢?
   console.log(scale(6)); 
   console.log(scale(7));
   console.log(scale(8));
   console.log(scale(9));
   console.log(scale(10));

   //输出:b
   //输出:b
   //输出:b
   //输出:b
   //输出:b
</script>
复制代码

总结:d3.scaleLinear()是一个连续的输出域domainrange都可以是连续的线性比例,建议不要用这个比例尺去做字符串,可以映射数值类型的

d3.scaleBand() 序数比例尺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>比例尺/scaleBand</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
</body>
</html>
<script>
/**
2. d3.scaleBand() 序数比例尺
d3.scaleBand()并不是一个连续性的比例尺,domain()中使用一个数组,不过range()需要是一个连续域。
*/
/**
d3.scaleBand()并不是一个连续性的比例尺,domain()中使用一个数组,不过range()需要是一个连续域。
*/
let scale = d3.scaleBand().domain([1,2,3,4,5]).range([0,100])
scale(1) // 输出:0
scale(2) // 输出:25
scale(4) // 输出:75
// 当输入不是domain()中的数据集时:
scale(0)  // 输出:undefined
scale(10) // 输出:undefined
console.log(scale(1),scale(2),scale(4),scale(0),scale(5),scale(10),'scale')
</script>
复制代码

总结:d3.scaleBand()也是适用于数值类型,再定义的输入范围外的话就会输出undefined

d3.scaleOrdinal() 序数比例尺


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>比例尺/scaleOrdinal</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
</body>
</html>
<script>
/**
3. d3.scaleOrdinal() 序数比例尺
d3.scaleOrdinal()的输入域和输出域都使用离散的数据
*/
let scale = d3.scaleOrdinal().domain(['jack', 'rose', 'john']).range([10, 20, 30])
scale('jack') // 输出:10
scale('rose') // 输出:20
scale('john') // 输出:30
// 当输入不是domain()中的数据集时:
scale('tom') // 输出:10
scale('trump') // 输出:20
console.log(scale('jack'),scale('rose'),scale('john'),scale('tom'),scale('trump'),scale('trrr'),scale('trtyr'),'scale')

</script>
复制代码

总结:d3.scaleOrdinal() 比例尺两边的都是离散的数据不支持连续的1~100这个样,domainrange输出域与输入域的值要一一对应,有点类似于咱们再编码的时候定义的单位类型转换{d: '天', t: '小时', w: '周'}

d3.scaleQuantize 量化比例尺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>比例尺/scaleQuantize</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
</body>
</html>
<script>
/**
4. d3.scaleQuantize() 量化比例尺
d3.scaleQuantize()也属于连续性比例尺。定义域是连续的,而输出域是离散的。
*/
let scale = d3.scaleQuantize().domain([0, 10]).range(['small', 'medium', 'long'])
scale(1) // 输出:small
scale(5.5) // 输出:medium
scale(8) // 输出:long 
/**
而对于domain()域外的情况:
*/
scale(-10) // 输出:small
scale(10) // 输出:long
console.log(scale(1),scale(5.5),scale(8),scale(-10),scale(10))
</script>
复制代码

总结:量化比例尺是定义域是连续的,而输出域是离散的

颜色比例尺

//颜色比例尺有点不一样10就代表10种颜色,20就代表20种颜色.......
console.log(d3.schemeCategory10,'d3.schemeCategory10>>>>>>>>...........')
console.log(d3.schemeCategory10,'d3.schemeCategory10>>>>>>>>...........')
//输出:10) ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"] "d3.schemeCategory10>>>>>>>>..........."
//比例尺.html:16 (10) ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"] "d3.schemeCategory10>>>>>>>>..........."

//可以搭配d3.scaleOrdinal()使用

let colorFn = d3.scaleOrdinal().domain([1, 10]).range(d3.schemeCategory10);
colorFn(1)
colorFn(2)
colorFn(3)
colorFn(4)
colorFn(5)
//获取颜色
复制代码

总结

每个比例尺的domainrange定义域和输出域都不一样,有的能支持连续域的,有的支持就对应映射的,大家其实可以回想下就不要去想d3比例尺, 就一个普通的文字‘比例尺’大家其实也可以想到这个东西是干哈的,就是d3有一些函数定义了后方便数据映射的,有的人该问了就是这么多比例尺,我不用行不行啊?可以啊当然可以😀。就跟咱们定义的单位的转换对象,你说我不定义我直接判断赋值可以不?可以,实现的价值是一样的,都是为了程序的正常运行嘛。 但咱们还是应该换个角度想,这个api作者设计的角度,我觉得一定是有一些价值,才会值得作者去设计吧!!!!!感觉还不错哈哈

结束语

  • 大家好 我是三原,多谢您的观看,我会更加努力(๑•̀ㅂ•́)و✧多多总结。
  • 每个方法都是敲出来验证过通过的,有需要可以放心复制。
  • 如果您给帮点个赞👍就更好了 谢谢您~~~~~
  • 期待您的关注
文章分类
前端
文章标签