【d3js】 d3js 比例尺-灵析社区

JOHO

前言

大家通过之前一篇小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()是一个连续的输出域domain和range都可以是连续的线性比例，建议不要用这个比例尺去做字符串，可以映射数值类型的

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这个样，domain和range输出域与输入域的值要一一对应，有点类似于咱们再编码的时候定义的单位类型转换{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)
//获取颜色

总结

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


阅读量：890

点赞量：0

收藏量:0