本文假定讀者有一定 javascript 和 D3 (《如何自學(xué) D3》) 基礎(chǔ)，若對 web 開發(fā)不太熟悉的同學(xué)，可先行了解下 js 中的高階函數(shù)、this指向等知識(shí)，以便更容易理解代碼。

Dashboard中經(jīng)常會(huì)有數(shù)字動(dòng)效的制作需求。

比如這種：

demo地址: https://github.com/mark0322/xCharts/tree/master/charts/Text

或者這種：

demo地址: https://github.com/mark0322/xCharts/tree/master/charts/Donut

今天，我們就來聊一下，如何用 D3 制作數(shù)字動(dòng)效。

D3 中的動(dòng)畫效果通過 d3-transition 模塊實(shí)現(xiàn)。

這里簡述一下動(dòng)畫原理：我們小時(shí)候都見過下圖的翻書動(dòng)畫，即短時(shí)間內(nèi)出現(xiàn)多張"相近"的圖片，人的視覺會(huì)將這些快速閃現(xiàn)的靜態(tài)圖片感知為動(dòng)畫。

圖片來自網(wǎng)絡(luò)

任何動(dòng)畫、視頻都是基于此原理，d3-transition 的動(dòng)畫原理也是如此。

話不多說，我們先看下第一張動(dòng)圖 數(shù)字動(dòng)畫的核心代碼：

// 定義 動(dòng)畫 的持續(xù)時(shí)間為 1.5S
const t = d3.transition().duration(1500);

// SVG 畫布上添加文字，并加入動(dòng)畫
svg.append('text')
    .transition(t)
    .text(9999) // 設(shè)定數(shù)字的最終值
    .tween('d', function() {

        // [注1]：獲得數(shù)字的終止值
        const val = d3.select(this).text();

        // [注2]：定義插值函數(shù)
        const i = d3.interpolateNumber(0, val);

        // [注3]："動(dòng)畫函數(shù)"
        return t => {

            // [注4]：通過 插值函數(shù) 與 tween() 結(jié)合，繪制動(dòng)畫
            d3.select(this).text((i(t) | 0);

            // console.log(t, i(t));
        }
    });

[注1]：獲得數(shù)字的最終值：9999。

[注2]：因?yàn)閿?shù)字動(dòng)畫為0 ~ 9999的動(dòng)畫，所以用插值函數(shù)將0 ~ 9999 “歸一化”為0 ~ 1的映射，以便后續(xù)動(dòng)畫函數(shù)中調(diào)用。eg: i(0.1) -> 999.9 i(0.5) –> 4999.5

[注3] + [注4]：如上文所述的動(dòng)畫原理，.tween() 的原理為：將2s的動(dòng)畫切成2s內(nèi)的很多個(gè)“時(shí)間切片”，每個(gè)“時(shí)間切片”均執(zhí)行“動(dòng)畫函數(shù)”，該“動(dòng)畫函數(shù)”的參數(shù) t 即為 0~1 (歸一化) 的對應(yīng)值。

很暈是不是？分別打印出t / i(t) 的值，你就會(huì)明白了~