[008] d3.active

 

d3.active

---

d3.active 는 현재 transition이 활성화된 노드를 반환하는 함수입니다. 연속적으로 연결된 transition 을 구현할 때 유용하게 사용됩니다.

 

 

예제

---

다음과 같이 typescript 코드를 작성합니다. (js 로의 빌드는 esbuild 등으로 진행 하신 후, 브라우저에서 script 태그로 불러오시면 됩니다.)

import * as d3 from 'd3';

// https://github.com/d3/d3-transition#active
// https://www.geeksforgeeks.org/d3-js-interpolatergb-function/
// https://runebook.dev/en/docs/d3/d3-transition?page=2#transition_tween

window.addEventListener('load', function() {
  const n = 10;

  const whiteblue = d3.interpolateRgb("#eee", "steelblue");
  const blueorange = d3.interpolateRgb("steelblue", "orange");
  const orangewhite = d3.interpolateRgb("orange", "#eee");

  d3
    .select("body")
    .selectAll("div")
    .data(d3.range(n))
    .enter()
    .append("div")
    .transition()
    .delay(function(d, i) { 
      const delayValue = (i + Math.random() * n / 4) * 1000; 
      console.log('delayValue', delayValue);
      return delayValue; 
    })
    .ease(d3.easeLinear)
    .on("start", function repeat() {
      console.log('repeat', d3.active(this));

      d3
        .active(this)
        ?.styleTween("background-color", function() { 
          console.log('styleTween : 회색 -> 파랑색'); // 회색 -> 파랑색
          return whiteblue; 
        })
        .transition()
        .delay(1000) // 1초 딜레이 적용
        .styleTween("background-color", function() { 
          console.log('styleTween : 파랑색 -> 주황색'); // 파랑색 -> 주황색
          return blueorange; 
        })
        .transition()
        .delay(1000) // 1초 딜레이 적용
        .styleTween("background-color", function() { 
          console.log('styleTween : 주황색 -> 회색'); // 주황색 -> 회색
          return orangewhite; 
        })
        .transition()
        .delay(1000) // 1초 딜레이 적용
        .on("start", repeat);
      });
});

 

 

결과는 다음과 같습니다.

참고

---

https://github.com/d3/d3-transition#active

GitHub - d3/d3-transition: Animated transitions for D3 selections.

https://www.geeksforgeeks.org/d3-js-interpolatergb-function/

D3.js interpolateRgb() Function - GeeksforGeeks

https://runebook.dev/en/docs/d3/d3-transition?page=2#transition_tween 

D3.js - d3-transition - Modifying Elements - After selecting elements and creating a transition with selection.transition, use