加载时动画 D3 热图单元格？

Question

I want to build a heatmap on a static HTML page using D3:

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

Once the page / the heatmap is loaded, I want the individual cells of the map to fade in one after another with some easing and about 200ms of delay between the fade-in of a cell.

While I have understood the basic.transition() and .duration() feature that D3 offers:

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

I'm struggling to trigger a fade-in style animation on load respectively targeting a cell. Would anyone be able to push me in the right direction?

Answer 1

You can use a transition on the rect's opacity and set the delay for the transition using a increment of 200ms.

First, create the rects with opacity = 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)

Then transition rects' opacity to 1, with each rect's delay incremented by 200ms:

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