與之前製作長條/折線圖類似，我們同樣要為我們昨天做好的heatmap加上一點微互動：從進場動畫開始著手。

正方形區塊：從無到有由中間長出來的效果

g.selectAll('.block')
    .data(data)
    .enter()
    .append('rect')
    .attr('class', 'block')
    // 開始的x 與 y 為正方形的中間，這樣正方形才會看起來像從中間長出來，而不是左上角
    .attr('x', (d) => (d.weekNum - 1) * 15 + (d.weekNum - 1) * 1 + 7.5)
    .attr('y', (d) => d.day * 15 + d.day * 1 + 7.5)
    .attr('fill', (d) => colorScale(d.value))
    // 開始的正方形邊長為0
    .attr('width', 0)
    .attr('height', 0)
    .transition()
    .duration(1000)
    // 這是會讓他的邊長會先超過結果再縮回來，創造有點彈一下的效果
    .ease(d3.easeBack)
    .attr('x', (d) => (d.weekNum - 1) * 15 + (d.weekNum - 1) * 1)
    .attr('y', (d) => d.day * 15 + d.day * 1)
    .attr('width', 15)
    .attr('height', 15)
    .attr('rx', 3);