加載時動畫 D3 熱圖單元格？

Question

我想使用 D3 在靜態 HTML 頁面上構建熱圖：

https://codepen.io/ChrisBean/pen/ZEYGYzL

加載頁面/熱圖后，我希望地圖的各個單元格通過一些緩和和單元格淡入之間的大約 200 毫秒的延遲一個接一個地淡入。

雖然我已經了解了 D3 提供的 basic.transition() 和 .duration() 功能：

  d3.select("#my_dataviz")
          .transition()
          .duration(1000)
          .style(???);

我正在努力在加載時分別針對一個單元格觸發淡入風格的動畫。 有人能把我推向正確的方向嗎？

Answer 1

您可以在矩形的不透明度上使用過渡，並使用 200 毫秒的增量設置過渡的延遲。

首先，創建不透明度 = 0 的矩形：

let squares = svg.selectAll()
    .data(data, (d) => `${d.group}:${d.variable}`)
    .enter()
    .append('rect')
    .attr('x', (d) => x(d.group))
    .attr('y', (d) => y(d.variable))
    .attr('width', x.bandwidth())
    .attr('height', y.bandwidth())
    .style('fill', (d) => myColor(d.value))
    .style("opacity", 0)

然后將矩形的不透明度轉換為 1，每個矩形的延遲增加 200 毫秒：

 squares.transition()
    .duration(3000)
    .delay((d,i) => i*200)
    .style("opacity", 1)