D3 - Update pattern

📌 목차

• Introuduction
• d3.interval
• Update pattern
• Conclusion

📌Introduction

안녕하세요. 오늘은 D3에서의 update pattern에 대해서 알아보겠습니다.

📌 d3.interval

update pattern으로 들어가기 전에 잠시 d3의 interval에 대해서 소개할까 합니다. d3.interval은 setInterval과 매우 비슷합니다. 단 clearInterval은 안해줘도 된다는 장점이 있어요.

d3.interval(() => {
    console.log("hello") // hello가 1초에 한번씩 찍힘
  }, 1000);

📌 Update pattern

update패턴은 data join부터 시작이 됩니다.

const rects = g.selectAll("rect").data(data, d => d.month);

여기서는 분명 rect가 아직 없었을 거예요. 근데 뒤에 이렇게 enter를 쓰는걸 본적이 있으실겁니다.

// DATA JOIN
  const rects = g.selectAll("rect").data(data, d => d.month);
  // ENTER
  rects
    .enter()
    .append("rect")
    .attr("fill", "grey")
    .attr("y", y(0))
    .attr("height", 0)
    .attr("x", (d) => x(d.month))
    .attr("y", (d) => y(d[value]))
    .attr("width", x.bandwidth)
    .attr("height", (d) => HEIGHT - y(d[value]));

이때 rects를 한번 찍어보게 되면 다음과 같이 나올거예요. exit, enter, parent, group이렇게 나올거예요. 그래서 update는 이 중간에 들어가게 됩니다. 이게 무슨말인가 싶지요? 다음과 같은 코드를 보세요.

const rects = g.selectAll("rect").data(data, (d) => d.month);

  // EXIT
  rects
    .exit()
    .attr("fill", "red")
    .transition(t)
    .attr("height", 0)
    .attr("y", y(0))
    .remove();

  // UPDATE
  rects
    .transition(t)
    .attr("y", (d) => y(d[value]))
    .attr("x", (d) => x(d.month))
    .attr("width", x.bandwidth)
    .attr("height", (d) => HEIGHT - y(d[value]));

  yLabel.text(flag ? "Profit ($)" : "Revenue ($)");

  // ENTER
  rects
    .enter()
    .append("rect")
    .attr("fill", "grey")
    .attr("y", y(0))
    .attr("height", 0)
    .attr("x", (d) => x(d.month))
    .attr("y", (d) => y(d[value]))
    .attr("width", x.bandwidth)
    .attr("height", (d) => HEIGHT - y(d[value]));

이렇게 enter와 exit을 하지 않는 부분에 들어가게 됩니다.

📌Conclusion

이렇게 오늘은 한번 update 패턴에 대해서 알아보았습니다. 그럼 다음시간에는 scatter plot에 대해서 한번 알아볼게요!