javascript - 在加载时对 D3 热图单元进行动画处理？

Question

我想使用 D3 在静态 HTML 页面上构建热图:

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

加载页面/热图后，我希望 map 的各个单元格逐渐淡入，并在单元格淡入之间有大约 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)