可视化工具D3.js教程入门（第六章）—— 比例尺的使用

本文链接：https://blog.csdn.net/weixin_44867717/article/details/120417526

可视化工具D3.js教程入门（第六章）—— 比例尺的使用

1、比例尺是什么？

比例尺能将“一个区间”的数据映射到“另一个区间”。

例如[0, 1]对应到[0, 300]，当输入0.5时，输出150。或者将[0, 1, 2]对应到[“red”, “green”, “blue”]，当输入2时，输出blue。

上述示例中的[0, 1]和[0, 1, 2]称为定义域，[0, 300]和[“red”, “green”, “blue”]称为值域。定义域和值域之间的映射方法称为对应法则。

要理解比例尺，就先需要理解定义域(domain)、值域(range)和对应法则这三个概念。

2、介绍下咱们这里常用的两种比例尺

2.1、线性比例尺

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>比例尺的使用</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>

</body>

<script>

    var scaleLiner = d3.scaleLinear()
        .domain([0, 3])
        .range([0, 300])

    console.log(scaleLiner(0));//输出 0
    console.log(scaleLiner(1));//输出 100
    console.log(scaleLiner(2));//输出 200
    console.log(scaleLiner(3));//输出 300

</script>

</html>

2.2、序数比例尺

和连续比例尺不同，序数比例尺的的定义域和值域都是离散的。实际场景中可能有需求根据名称、序号等得到另一些离散的值如颜色头衔等。此时就要考虑序数比例尺。

序数比例尺的创建方法是：d3.scaleOrdinal([range])。

使用空的定义域和指定的值域构造一个序数比例尺。如果没有指定值域则默认为空数组。序数比例尺在定义非空的定义域之前，总是返回 undefined

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>比例尺的使用</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>

</body>

<script>

    var color = ['blue', 'red', 'green', 'pink']
    var scaleOrdinal = d3.scaleOrdinal()
        .domain([0, 1, 2, 3])
        .range(color)

    for (var i = 0; i < color.length; i++) {
        d3.select('body').append('div').text('请看我的颜色').style('color', scaleOrdinal(i));
    }

</script>

</html>

效果

在这里插入图片描述

3、接下来咱们应用比例尺来画一下上一章的图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>scaleLinear</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<body>

    <svg width="100%" height="300"></svg>

</body>

<script>

    var data = [7.3, 5.3, 6.3, 2.3, 1.3];

    //定义比例尺
    var scaleLinear = d3.scaleLinear().domain([0, d3.max(data)]).range([0, 800]);

    var g = d3.select('svg')
        .append('g')
        .attr('transform', 'translate(30,30)');

    var rectHeight = 30;

    g.selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
        .attr('x', 0)
        .attr('y', function (d, i) {
            return rectHeight * i;
        })
        .attr('width', function (d, i) {
            return scaleLinear(d);//在这里的得到 映射的宽度
        })
        .attr('height', rectHeight - 5)
        .attr('fill', 'green');

</script>

</html>