加载时动画 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)