D3 数据可视化005——插值器 interpolate

插值器是D3核心功能之一，也是前面提到的尺度内部的实现方法之一。插值是在给定的集合（一般是一头一尾）中，找到一个 x ，这个 x 在头尾之间。

D3中提供了很多插值方法

• interpolateNumber  数值插值器
• interpolateString 字符串插值器
• interpolateRgb 颜色插值器
• interpolateDate 日期插值器
• interpolateArray 数组插值器
• d3-interpolate | D3 by Observable

下面通过两种方法实现黄色到黑色的插值，达到渐变的效果。 

 

通过颜色插值器实现 d3.interpolateRgb()

这个方法接收两个颜色值，可以使用颜色名称或者十六进制或者RGB，如：

•  d3.interpolateRgb(‘red’, 'green')
• d3.interpolateRgb('#ff8900', '#ff8caa')
• d3.interpolateRgb('rgb(23, 102, 3)', 'rgb(33, 46, 100)')
• 多个值也是可以的 d3.interpolateRgb("purple",  “green”, "orange")
• 其它颜色插值函数，使用前注意兼容性 Color--interpolate

<script setup>
import { onMounted } from "vue";
import * as d3 from "d3";

const someData = [0,1,2,3,4,5,6,7,8,9,10]
// 声明一个颜色插值器
const interpolateColor = d3.interpolateRgb('yellow', 'black')

const render = (data) => {
    d3.select('#d3Container').selectAll('div').data(data)
    .enter().append('div').attr('class', 'cell')
    .style(
        // 赋值操作，注意插值器参数 0~1 
        'background-color', d => interpolateColor(d * 0.1)
    ).text(d => d)
}


onMounted(() => {
    //interpolateColor(0.8) 表示在黄色和黑色之间，距离黄色80%的位置插入一个值
    console.log(interpolateColor(0.8)) // rgb(51, 51, 0)
    render(someData)
})

</script>

<template>
    <div id="d3Container" class="container">
    </div>
</template>

<style lang="scss">
.container {
    padding: 30px;
    font-size: 20px;
    width: 50vw;
    height: 500px;
    margin:auto;
    background-color: #fbe9d5;
    display: flex;
    align-items: top;
    justify-content: space-between;

    .cell{
        width: 28px;
        height: 80px;
        // background-color: #ff8900;
        padding: 0 8px;
        line-height: 80px;
        font-size: 18px;
        color: #fff;
        margin: 40 12px 0 0;
    }
}
</style>

 如果在需要访问区间内某一个值时，给插值器传入 0~1 的小数，便可以返回

• interpolateColor = d3.interpolateRgb('yellow', 'black')

• interpolateColor(0.8)

前面说过线性尺度默认调用了插值器，所以我们可以直接使用线性尺度实现同样的效果，并且在样式赋值时，省去了 interpolateColor(d * 0.1) 小数化的步骤

 通过线性尺度实现 d3.scaleLinear()

const someData = [0,1,2,3,4,5,6,7,8,9,10]
const scaleLinearColor = d3.scaleLinear().domain([0, 10]).range(['yellow', 'black'])

const render = (data) => {
    d3.select('#d3Container').selectAll('div').data(data)
    .enter().append('div').attr('class', 'cell')
    .style(
        'background-color', d => scaleLinearColor(d)
    ).text(d => d)
}


render(someData)

 字符串插值器 d3.interpolateString()

const someData = [0,1,2,3,4,5,6,7,8,9,10]
// 插值器
const interpolateString = d3.interpolateString('100px', '0px')
// 线性尺度
const scaleLinearString = d3.scaleLinear().domain([0, 10]).range(['100px', '0px'])

const render = (data) => {
    d3.select('#d3Container').selectAll('div').data(data)
    .enter().append('div').attr('class', 'cell')
    .style(
        // 'padding-bottom', d => interpolateString(d * 0.1)
        'padding-bottom', d => scaleLinearString(d)
    ).text(d => d)
}

 应用场景复合对象的插值

 在这里例子中，体现了一下几个特性的使用

1. 连续尺度 scalePow()
2. 分段尺度 

   .domain([0, 7, 13])

                           .range([

                               {color: 'rgb(128 0 128 / 48%)', height: '20px'},

                               {color: 'pink', height: '100px'},

                               {color: 'orange', height: '200px'}

                           ])

3. 复合插值
   'height', d => compoundScale(d).height
   'background-color', d => compoundScale(d).color

详细代码 
 

<script setup>
import { onMounted } from "vue";
import * as d3 from "d3";

const someData = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14]
const compoundScale = d3.scalePow().exponent(2)
                        .domain([0, 7, 13])
                        .range([
                            {color: 'rgb(128 0 128 / 48%)', height: '20px'},
                            {color: 'pink', height: '100px'},
                            {color: 'orange', height: '200px'}
                        ])

const render = (data) => {
    d3.select('#d3Container').selectAll('div').data(data)
    .enter().append('div').attr('class', 'cell')
    .style(
        'height', d => compoundScale(d).height
    )
    .style(
        'background-color', d => compoundScale(d).color
    ).text(d => d)
}


onMounted(() => {
    render(someData)
})

</script>

<template>
    <div id="d3Container" class="container">
    </div>
</template>

<style lang="scss">
.container {
    padding: 30px;
    font-size: 20px;
    width: 50vw;
    height: 500px;
    margin:auto;
    background-color: #fbe9d5;
    display: flex;
    align-items: top;
    justify-content: space-between;

    .cell{
        width: 20px;
        background-color: #ff8900;
        padding: 12px 8px;
        line-height: 12px;
        font-size: 16px;
        color: #fff;
        margin-top: 40px;
    }
}
</style>