Skip to content

Transitions

Jump to bottom
zziuni edited this page Apr 4, 2013 · 50 revisions

Wiki ▸ API Reference ▸ Core ▸ Transitions

트랜지션은 연산자를 즉시 적용하지 않고 부드럽게 시간을 두고 적용하는 특수한 타입의 selection이다. transition 연산자를 사용해서 선택물에서 트랜지션을 끌어낸다. 트랜지션은 전부는 아니지만 일반적으로 attr와 style같은 선택물의 연산자를 지원한다. 사용 예를 들면, 트랜지션을 시작하기전에는 문서요소를 추가해야하고, remove 연산자로 트랜지션이 끝난후에 문서요소를 제거할 수 있다.

트랜지션은 다른 연산자와 비슷하게 연산된 데이터의 함수들을 사용해서 문서요소 별로 지연(delay)과 지속(duration)을 갖고 있을 수 있다. 이를 통해서 데이터나 색인값 중 하나를 기반으로 각 문서요소에서 트랜지션 적용의 시차를 쉽게 둘 수 있다. 예를 들어, 문서요소를 정렬한 후에 트랜지션 중에 문서요소가 재 정렬되는 걸 인지하기 쉽게하기 위해서 트랜지션에 시차를 둘 수 있다.이 기법의 보다 자세한 내용은 Heer와 Robertson의 "Animated Transitions in Statistical Data Graphics"를 참고하라.

D3는 임의의 값을 간단한 트랜지셔닝하기 위한 빌트인 interpolator를 많이 갖고 있다. 예를 들어 폰트 문자열 "500 12px sans-serif"을 "300 42px sans-serif"로 트랜지션을 시도하면 D3는 폰트 크기와 높이를 보간(interpolate)할 숫자를 문자열에서 자동으로 찾는다. 임의의 중첩 객체와 배열, SVG path 데이터도 값 사이를 보간할 수 있다. attrTween과 styleTween를 사용해서 빌트인 되어있지 않은 커스텀 interpolator를 만들 수 있다. D3의 interpolator는 scales를 위한 기준을 제공하며 interpolator가 칼라, 숫자, 어떤 임의의 값과 [0,1] 범위내의 t를 매핑하는 함수이므로 트랜지션가 아니고도 사용할 수 있다.

주어진 문서요소에서는 한 순간에 한 트랜지션만 활성화 된다. 하지만, 동일 문서요소에서 여러 트랜지션이 스케줄링 될 수는 있다. 주어진 시간내에 시차를 두고 제공되는 동일 문서요소에서 각 트랜지션이 순서대로 동작한다. 새로운 트랜지션이 주어진 문서요소에서 실행되면 이전 트랜지션들은 스케줄링된 아직 실행되지 않은 트랜지션까지 모두 바로 취소된다. 이를 통해서 이전 트랜지션이 동작 중이거나 시차를 두고 지연 되어있더라도 사용자 이벤트 응답같은 새로운 트랜지션으로 대체할 수 있다. 여러단계의 트랜지션(이전 단계의 트랜지션의 "end"이벤트에서 생성된 트랜지션)는 동일 "세대"로 여겨진다. 여기서 "세대"란 여러단계의 트랜지션이 생성될 때 내부적으로 상속되는 단순증가형 유일 ID로 추적하는 오리지널 트랜지션과 같은 "세대"임을 의미한다.

트랜지션에 대한 더 자세한 내용은 튜토리얼 Working with Transitions를 참고하라.

Starting Transitions

트랜지션은 선택물에서 transition를 사용해서 생성한다. 트랜지션은 기본값이 0(zero)인 지연값(delay) 이후에 자동으로 시작한다. 하지만, 지연값이 0인 트랜지션은 실제로는 첫 타이머 콜백 대기를 위한 약간의 지연(~17ms) 후 시작한다. 트랜지션 지속시간의 기본값은 250ms이다.

# d3.transition([selection])

애니메이션 되는 트랜지션을 생성하며 d3.select(document).transition()와 같다. 이 메서드는 트랜지션에서 선택물을 얻는게 아니라, 선택물에서 트랜지션을 얻으므로 잘 사용하지 않는다.

이 메서드에 selction 인자를 넘겨서 호출할 때는 지정한 선택물을 반환한다. 즉, 내부에서 별도 조작이 없는 함수다. 그러나 transition.each의 컨텍스트에서는 이 메서드가 지정한 선택물을 위한 새로운 트랜지션을 생성한다. 그 선택물은 부모 트랜지션의 지연시간과 지속시간, 다른 프로퍼티를 상속한다. 이는 동시에 일어나는 트랜지션을 지원해야 하는 상황에서 재사용할 수 있는 컴포넌트를 구현할때 유용하다. 재사용할 수 있는 컴포넌트는 선택물이나 트랜지션에서 호출될 수 있다. D3에서 axis component가 그 예다.

# transition.delay(delay)

밀리초로 트랜지션 지연시간 을 지정한다. delay 인자가 상수면 모든 문서요소는 같은 지연시간을 갖지만 delay 가 함수면 그 함수는 선택한 각 문서요소에서 순서대로 동작한다. 전달인자는 데이텀 d, 색인값 i이고 this 컨텍스트는 해당 DOM 문서요소다. 함수의 반환값은 각 문서요소의 지연시간을 지정하는데 사용된다. 기본지연값은 0이다.

문서요소의 트랜지션에 시간차를 두기 위해서는 색인값 i를 곱해서 지연시간을 세팅하는 간편한 방법이 있다. 예를 들며, 지속시간 duration 이 고정되어있고 해당 선택물에 n 개의 문서요소가 있다면, 2 * duration 동안 순차적으로 트랜지션을 동작할 수 있다.

.delay(function(d, i) { return i / n * duration; })

데이터를 이용한 함수로 지연시간을 계산할 수도 있다. 그렇게 해서 데이터 중심의 애니메이션을 생성할 수 있다.

# transition.duration(duration)

밀리초로 문서요소당 지속시간을 지정한다. duration 이 상우이면 모든 문서요소는 같은 지속시간을 갖지만 duration 이 함수면 선택한 각 문서요소에서 순서대로 동작한다. 전달인자는 데이텀 d, 색인값 i이고 this 컨텍스트는 해당 DOM 문서요소다. 함수의 반환값은 각 문서요소의 지속시간을 지정하는데 사용된다. 기본 지속시간 값은 250ms이다.

# transition.ease(value[, arguments])

트랜지션 이징(easing) 함수를 지정한다. 인자 value 가 함수이면 그 함수를 범위 [0,1]에서 해당 파라미터 타이밍 값 t 를 이징하는데 사용한다. 함수가 아니면 value 은 문자열로 가정하고 arguments 는 이징함수를 생성하기위해서 d3.ease 메서드로 전달된다. 기본 이징 함수는 "cubic-in-out"이다. 이 메서드로 문서요소나 속성 별로 커스텀 이징 함수를 만드는건 불가능하다. 하지만 "선형(linear)" 이징 함수를 사용한다면 attrTween나 styleTween를 사용하는 사용자 interpolator에서 커스텀 이징을 적용할 수 있다.

Operating on Transitions

Content

# transition.attr(name, value)

속성명이 name 인 속성을 값 value 으로 변환(transition)한다. 속성의 현재값이 value 로 변환되며, value 가 상수면 모든 selector들이 동일 값으로 변환하고 함수이면 개별적으로 판단한다. 함수일 때는 전달인자 d, i를 가진다. 각각 현재 datum과 index이며, 함수 안에서 this는 해당 DOM Elmenet이다. 함수의 반환값이 속성의 트랜지션 값으로 사용된다. null은 반환값으로 사용할 수 없다. 트랜지션 종료후 속성 삭제를 원하면 end이벤트에 리스너를 등록하라.

사용할 interpolator는 종료값( value ) 기반으로 자동으로 선택된다. 종료값이 숫자면 시작값도 숫자로 여기고 interpolateNumber를 사용한다. 종료값이 문자면 정규식 /^(#|rgb\(|hsl\()/를 통해서 색상 값인지, CSS Name Color 인지 확인한다. 만약 맞으면 시작값을 RGB 칼라로 보고 interpolateRgb를 사용한다. 둘다 아니면 문자열안에 파뭍힌 숫자들로 보간 작업을 하는 interpolateString를 사용한다.

# transition.attrTween(name, tween)

지정한 name 속성값을 tween 함수로 트랜지션한다. 트랜지션의 시작과 끝 값은 tween 으로 결정되며, tween 함수는 트랜지션이 각 요소에서 시작될 때 호출 된다. tween 의 인자는 datum, index, atribute 이고 this는 해당 DOM element이다. 이 함수의 반환값은 반드시 interpolator여야 한다. interpolator는 칼라, 숫자 아니면 어떤 임의의 값과 [0,1] 범위내의 t를 매핑하는 함수다.

예를 들면, attr는 attrTween 기반으로 만들어졌고, attr 연산자는 종료값에 의지해서 tween 를 사용한다. 종료값은 함수일 수도 있고 상수일 수도 있다. 다음은 종료값이 함수인 경우다.

function tween(d, i, a) {
  return d3.interpolate(a, String(value.call(this, d, i)));
}

다음은 종료 값이 상수인 경우.

function tween(d, i, a) {
  return d3.interpolate(a, String(value));
}

attrTween는 사용자 정의 interpolater가 필요할 때 사용한다. 이를 위해서는 SVG 패스 데이터의 의미를 이해하는 것이 필요하다. 범용 테크닉중 dataspace interpolation(데이터 보간법) 이 있다. interpolateObject는 값 두 개를 보간할 때 사용하는데 보간 결과 값은 속성의 새로운 값을 연산하는데 사용된다(shape 같은). 일반적으로는 이 과정을 자동 처리해주는 attr를 사용한다.

# transition.style(name, value[, priority])

전달인자인 name 과 value 로 CSS 스타일 프로퍼티의 값을 트랜지션 한다. priority 인자는 옵션 인자로 null이거나 "important" 문자열(느낌표 없음)을 갖는다. 트랜지션 시작값은 연산된 해당 스타일 프로퍼티 값이고, 종료 값은 value 로 지정한 값이다. value 가 상수일 때는 모든 문서요소가 같은 스타일 프로퍼티로 트랜지션 되고, 함수일 때는 선택된 각 문서요소별로 트랜지션을 순서대로 시작하기위해서 함수를 실행한다. 이때 전달인자는 데이텀 d와 해당 색인값 i이고 this 컨텍스트는 해당 DOM 문서요소다. 함수의 반환값은 각 문서요소의 스타일 프로퍼티 값을 트랜지션 하는데 사용하며 null 값은 지원하지 않는다. 트랜지션이 끝난 후에 스타일 프로퍼티를 제거하고 싶다면, end 이벤트에 이벤트 리스너를 설정하라.

interpolator는 종료 값 기반으로 자동으로 선택된다. 종료 값이 숫자면 시작 값도 숫자로 여기고 interpolateNumber를 사용한다. 종료값이 문자면 정규식 /^(#|rgb\(|hsl\()/를 통해서 색상 값인지, CSS named colors 인지 확인한다. 만약 맞으면 시작값을 RGB 칼라로 보고 interpolateRgb를 사용한다. 둘다 아니면 문자열안에 파뭍힌 숫자들로 보간 작업을 하는 interpolateString를 사용한다.

적용된 시작 값은 지정했던 값이 아닐 수도 있다. 특히 스타일 프로퍼티가 축약형 프로퍼를 사용해서 지정했다면 말이다. (예를 들면 "font-size", "font-face"의 축약형은 "font"이다. ) 더군다나 "font-size", "line-height" 같은 계산된 면적은 항상 단위가 픽셀이다. 그래서 적절하게 픽셀로 종료 값을 지정해야 한다.

# transition.styleTween(name, tween[, priority])

전달인자 tween 함수를 따라서 CSS 스타일 프로퍼티 "name"의 값을 트랜지션한다. priority 인자는 옵션 인자로 null이거나 "important" 문자열(느낌표 없음)을 갖는다. 트랜지션의 시작과 종료 값은 tween 함수로 결정된다. tween 함수는 각 문서요소에서 트랜지션이 시자될 때 호출된다. 전달인자는 데이텀 d, 색인값 i, 해당 속성 값 a이고 'this 컨텍스트는 해당 DOM 문서요소다. tween 함수의 반환 값은 interpolator 여야만 한다. interpolator는 색상, 숫자, 임의의 값과 범위 [0,1]의 파라미터 값 t 를 매핑하는 함수다.

예를 들어, style 연산자는 이 styleTween 연산자로 만들어져있다. style 연산자는 종료값에 의지해서 tween 함수를 사용한다. 종료값은 함수일 수도 있고 상수일 수도 있다. 다음은 종료값이 함수인 경우다.

function tween(d, i, a) {
  return d3.interpolate(a, String(value.call(this, d, i)));
}

다음은 종료 값이 상수인 경우.

function tween(d, i, a) {
  return d3.interpolate(a, String(value));
}

styleTween 연산자는 사용자 정의 interpolater가 필요할 때 사용한다. 이를 위해서는 CSS3 트랜지션의 의미를 이해하는 것이 필요하다. 일반적으로는 style 연산자를 사용하는데 이 연산자에는 계산된 해당 스타일 프로퍼티 값을 원하는 종료 값으로 자동으로 바꾸는 interpolator가 있다.

# transition.text(value)

text 연산자는 textContent 프로퍼티 기반으로 되어있다. 텍스트 컨텐츠를 지정하면 기존에 있던 하위 문서요소는 교체된다.

트랜지션이 시작할 때 선택한 모든 문서요소에 지정한 value로 텍스트 컨텐츠를 지정한다. value 가 상수이면 모든 문서요소는 같은 텍스트 컨텐츠로 지정하고 함수면 트랜지션에 선택한 개별 문서요소에서 시작할 때 작동한다. 이 함수의 전달함수는 데이텀 d, 색인값 i이고 this 컨텍스트는 해당 DOM 문서요소다. 함수의 반환값은 각 문서요소의 텍스트 컨텐츠로 사용된다. null 값은 모든 컨텐츠를 제거한다.

# transition.tween(name, factory)

전달인자 name 으로 사용자 tween을 등록한다. 트랜지션이 시작할 때 전달인자 factory 함수는 tween 함수를 산출하기위해서 트랜지션에서 선택한 각 문서요소에서 호출된다. factory가 null를 반환하면 tween은 선택한 문서요소에서 동작하지 않는다. 이 메서드는 attr과 style tween에서 내부적으로 사용되고 다른 문서 컨텐츠를 보간(interpolate)하기 위해서 사용될 수 있다. 예를 들면, 다음은 텍스트 컨텍트를 보간한다.

selection.transition().tween("text", function() {
  var i = d3.interpolate(this.textContent, "yellow");
  return function(t) {
    this.textContent = i(t);
  };
});

tween은 일반적으로 트랜지션을 "yellow"로 하드코딩한 위의 예제같은 방식이 아닌 재사용 가능한 함수(클로저라 부른다.)로 작성된다. 참고하려면 D3를 소스를 참고하라.

# transition.remove()

트랜지션이 끝났을 때 선택한 문서요소를 제거한다. 하지만 새로운 트랜지션이 선택된 문서요소에 스케줄되어 있으면, 그 문서요소는 제거하지 않고, "end" 이벤트는 여전히 발생한다.

Subtransitions

트랜지션은 이미 존재하는 트랜지션에서 일어날 수도 있다. 하위선택물과 비슷한 형태다. 하위트랜지션은 부모 트랜지션에서 이징, 지연시간, 지속시간을 상속한다.

# transition.select(selector)

현재 트랜지션에서 각 문서요소에 대해 selector 문자열에 해당하는 첫번째 자손 문서요소를 선택한다. 해당 문서요소에 해당하는 문서요소가 없다면, 반환되는 해당 색인값의 문서요소는 null이다. data를 제외한 연산자들은 null 문서요소를 자동으로 무시한다. 그렇게 함으로써 기존 선택물의 색인값을 유지할 수 있다. 해당 문서요소가 관련된 데이터가 있다면 그 데이터는 반환되는 하위선택물로 상속된다. 그리고 새롭게 선택된 문서요소와 자동으로 엮인다. 셀렉터에 해당하는 문서요소가 여러개면 문서 문서상 첫번째 문서요소만 선택된다.

이 메서드는 다음과 거의 비슷하다.

selection.select(selector).transition()

selection 이 현재 트랜지션 아래의 선택물이고 그러면 반환되는 새로운 트랜지션은 해당 트랜지션의 이징, 지연시간, 지속시간을 상속한다.

# transition.selectAll(selector)

현재 트랜지션의 각 문서요소에서 selector 문자열에 해당하는 자손 문서요소들을 선택한다. 해당 선택물의 조상 노드로 그룹핑된 선택물을 반환한다. 해당 문서요소에서 셀렉터에 해당하는 문서요소가 없으면 반환 선택물에서 해당 색인값의 그룹은 빈 상태가 된다. 하위선택물은 해당 선택물에서 데이터를 상속하지 않는다. 하지만 데이터가 사전에 선택된 문서요소와 엮였다면 그 데이터는 제어할 수 있다.

이 메서드는 다음과 거의 비슷한다.

selection.selectAll(selector).transition()

selection 은 현재 트랜지션의 하위 선택물이고 그러면 반환되는 새로운 트랜지션은 해당 트랜지션의 이징(easing), 지연시간, 지속시간을 상속한다. 각 하위 문서요소의 지속시간과 지연시간은 해당 트랜지션에서 부모 문서요소의 지속시간과 지연시간을 상속한다.

# transition. filter (selector)

전달인자로 지정한 selector 에 해당하는 문서요소만 담은 새로운 변환을 반환하는 변환을 필터링한다. 선택자 selector 는 ".foo"같은 선택자 문자열만이 아니라 함수도 가능하다. 다른 연산자들 처럼 이렇게 사용하는 함수에 전달되는 인자는 데이텀 d와 색인값 i이고 this 컨텍스트는 해당 DOM 문서요소다. 자바스크립트의 배열의 내장 메서드 filter 처럼 반환 선택물은 원본 선택물의 색인값을 유지하지 않는다. 문서요소가 소거된 사본을 반환한다. 색인값을 유지하고 싶으면 select 메서드를 사용해라. 예를 들어 하나 건너씩 문서요소를 선택하려면

var odds = transition.select(function(d, i) { return i & 1 ? this : null; });

동일한 효과를 필터 인자로 함수를 사용하면

var odds = transition.filter(function(d, i) { return i & 1; });

필터 인자로 선택자 문자열을 사용하면

var odds = transition.filter(":nth-child(odd)");

이처럼, 문서요소의 하위집합으로 적용하기 위해서 select, filter 모두 사용할 수 있다.

# transition.transition()

이전 단계 트랜지션(transition)과 동일한 선택 문서요소에서 그 트랜지션의 종료와 함께 시작하는 신규 트랜지션을 생성한다. 새로운 트랜지션은 현재 이전 단계 트랜지션의 지연시간과 지속시간을 상속한다. 이 메서드는 "end" 이벤트를 위한 리스너 없이도 chained transitions를 정의하는 데 사용할 수 있다.

Control

# transition.each([type, ]listener)

전달인자 type 을 넘기면 트랜지션 이벤트를 위한 리스너를 추가한다. "start", "end"이벤트도 여기에 포함된다. 이렇게 추가한 이벤트 리스너는 트랜지션 안에서 지연시간과 지속시간이 반복되더라도 개별 문서요소별로 호출된다. start 이벤트를 개별 문서요소가 트랜지션 시작 같은 즉각적인 변화를 일으키기위해서 사용될 수 있다. end 이벤트는 해당 문서요소 this를 선택하고 새 트랜지션을 이끌어는 과정을 통해서 다단계 트랜지션을 일으키기위해서 사용할 수 있다. end 이벤트에서 생성된 모든 트랜지션은 현재 트랜지션 ID를 상속한다. 이를 통해서 이미 예약된 신규 트랜지션을 덥어쓰는일을 방지한다.

type 이 없으면 selection.each와 동일하게 동작한다.

# transition.call(function[, arguments…])

현재 트랜지션에서 옵션 인자 arguments 와 함께 function 를 한번 호출한다. call 연산자는 함수가 반환하는 값과 관계없이 항상 현재 트랜지션을 반환한다. call 연산자는 수동으로 함수를 호출하는 경우와 동작이 동일하지만 메서드 체인을 적용하기 쉽다는 장점이 있다. 예를 들어 각기 다른 곳에서 같은 방법으로 속성을 지정하려 한다고 하면 다음 같은 재사용 가능한 함수를 만든다.

function foo(transition) {
  transition
      .attr("name1", "value1")
      .attr("name2", "value2");
}

이걸 이렇게 부를 수도 있지만,

foo(d3.selectAll("div").transition())

이렇게 해도 같다.

d3.selectAll("div").transition().call(foo);

대부분은 트랜지션과 선택물에서 모두 동일한 함수 foo 를 호출할 수 있는데, 이는 선택물와 트랜지션이 동일 메서드를 바라보기 때문이며 이경우, 호출된 함수의 this 컨텍스트도 현재 트랜지션이다. 이 연산자와 첫 번째 전달인자는 불필요한 면이 좀 있어서 차후에 개선될 지도 모른다.

Easing

# d3.ease(type[, arguments…])

옵션 인자 arguments 를 가지고 지정한 type 의 내장 이징(easing) 함수를 반환한다. 이징 함수는 범위 [0,1] 내에서 파라미터 타임 값 t 를 취하고 이를 유사한 범위를 가진 다른값과 매핑한다. 일반적으로 트랜지션 easing를 지정할 때 사용한다. 다음 타입의 이징을 지원한다.

  • linear - the identity function, t. 독자적 함수.
  • poly(k) - raises t to the specified power k (e.g., 3). t 를 k 만큼 거듭제곱 해서 증가시킨다.
  • quad - equivalent to poly(2). poly(2)와 동일
  • cubic - equivalent to poly(3). poly(3)와 동일
  • sin - applies the trigonometric function sin. 삼각함수 sin 를 적용.
  • exp - raises 2 to a power based on t. t 에 기초해서 2를 거듭제곱으로 증가한다.
  • circle - the quarter circle. 1/4의 호
  • elastic(a, p) - simulates an elastic band; may extend slightly beyond 0 and 1.
  • back(s) - simulates backing into a parking space.
  • bounce - simulates a bouncy collision.

이런 내장 타입들은 다음 모드를 사용해서 확장될 수 있다.

  • in - the identity function. 독자적인 함수.
  • out - reverses the easing direction to [1,0]. [1.0]으로 이징 방향 변경.
  • in-out - copies and mirrors the easing function from [0,.5] and [.5,1]. [0,.5]와 [.5,1]에서 이징 함수를 복제하고 밀러링한다.
  • out-in - copies and mirrors the easing function from [1,.5] and [.5,0]. [1,.5]과 [.5,0]에서 이징 함수를 복제하고 밀러링한다.

기본 이징 함수는 적당한 slow-in slow-out 애니메이션을 지원하는 "cubic-in-out" 이다.

# ease(t)

범위 [0,1] 안에서 파라미터 타임 t 를 인자로 주면 이징된 타임을 반환한다. 반환된 값도 일반적으로 범위 [0,1]안에 있다. 하지만 "elastic" 처럼 명확한 이징 함수의 범위를 약간 넘을 수도 있다.

Timers

D3는 수천개의 타이머를 최소한의 오버헤드로 동시에 처리할 수 있는 고효율의 타이머 큐를 내부에서 유지한다. 또한 이 타이머 큐는 트랜지션이 동시에 일어나거나 순차적으로 일어나도록 스케줄 되었을 때 애니메이션 타이밍이 일관되도록 보장해준다. 브라우저가 지원한다면 타이머 큐는 유연하면서 효율적인 애니메이션을 위해서 requestAnimationFrame를 사용한다. 뿐만아니라 타이머 큐는 다음 이벤트 발생과의 간격이 길 경우에도 setTimeout에 비해서 현명하게 동작한다.

# d3.timer(function, [delay, [mark]])

사용자 정의 애니메이션 타이머를 시작한다. 이 타이머는 전달인자 function 이 true를 반환할 때 까지 반복적으로 계속 함수를 호출한다. 타이머를 시작하면 취소할 방법이 없으므로 동작이 끝나면 타이머 함수가 반드시 true를 반환해야 한다.

정해진 타임스템프 mark 에서부터 delay 밀리초 이후에 주어진 함수 function 를 호출해야만 한다면 옵션 전달인자 delay 를 사용한다. delay 를 밀리초를 나타내는 정수고 mark 는 특정시점 이후를 밀리초로 나타낸 타임스템프 정수다. mark 를 생략하면 Date.now()라 가정하며, 적절한 타임스템프를 위한 data 객체 변환을 위해 Date.getTime를 사용할 수도 있다.

function 이 호출되야 하는 시점이 특정 시점에서 상대적이도록 지정하기 위해서 delay 와 mark 를 사용할 수 있다. 예를 들면, 날짜기반의 약속은 다음 코드처럼 할 수 있다.

var appointment = new Date(2012, 09, 29, 14, 0, 0); // @ 29/sep/2012, 1400 hours
...
// 네시간 혹은 그 전에 화면에 약속을 환기시킨다. delay에는 음수도 쓸 수 있다!
d3.timer(flash_appointments_due, -4 * 3600 * 1000, appointment);

# d3.timer.flush()

타이머를 지연없이 즉시 실행한다. 일반적으로 '지연없는' 트랜지션은 약간의 지연(10ms 미만) 후 실행된다. 이는 브라우저가 페이지를 두 번 랜더링 할 때 살짝 깜박이는 원인이 된다. 두번의 랜더링은 첫 번째 이벤트 루프가 끝났을 때 한 번 일어나고 나서 첫 타이머 콜백에서 바로 다시 일어난다. 만료된 타이머를 첫 번째 이벤트 루프의 종료 지점에 큐로 쌓아서 지연없는 트랜지션을 바로 실행하고 깜박임을 피할 수 있다.

Interpolation

옮긴이: Interpolation은 두 값 사이를 등간격의 값들로 매꾸는 보간을 뜻한다. interpolator는 그 역활을 하는 함수로 굳이 옮기면 '보간자'이지만 잘 와닫지 않는건 동일하기에 그냥 외래어 '인터폴레이터'로 표기한다.

D3는 임의 값들을 간단히 보간(interpolate)하기 위한 많은 종류의 인터폴레이터(interpolator)를 내장하고 있다. 인터폴레이터는 정의역 범위가 [0,1]인 파라미터 값 t 를 색상, 숫자, 임의 값과 매핑한 함수다.

# d3.interpolate(a, b)

a , b 두 값 사이의 기본 인터폴레이터를 반환한다. 인터폴레이터의 타입은 종료값 b 에 기반한다. b 가 숫자면, a 를 숫자로 판단하고 interpolateNumber를 사용한다. b 가 문자열이면, /^(#|rgb\(|hsl\()/ 형태의 색상으로 표현가능한지, CSS named colors 중 하나인지 확인 작업을 한다. 그래서 b 가 색상이면, a 도 RGB 색상으로 보고 interpolateRgb를 사용한다. 이 둘이 아니면 interpolateString를 사용한다. 그래서 문자열에 들어있는 숫자를 보간(interpolate) 작업한다. 이같은 기본 인터포레이터 타입은 추가 타입을 지원하기 위해서 d3.interpolators 배열에 사용자 정의 인터폴레이터를 넣어서(push) 확장할 수 있다.

# interpolate(t)

범위 [0,1]의 파라미터 t 를 받아서, 연관된 보간 값을 반환한다. 인터폴레이터는 일반적으로 입력값 정의역(특정량의 수치값)을 출력값 치역(색상이나 픽셀 좌표의 범위)으로 매핑하기위한 스케일(scale) 결합에서 사용된다.

# d3.interpolateNumber(a, b)

두 숫자 a, b 사이의 숫자형 인터폴레이터를 반환한다. 반환 인터폴레이터는 다음과 같다.

function interpolate(t) {
  return a * (1 - t) + b * t;
}

주의사항: attr 같은 문자열을 생성하기위해서 인터폴레이터를 사용할때 숫자 0에서 시작하거나 끝나는 보간작업은 피해야 한다. 문자화 했을 때, 매우 작은 값은 과학적 표기법(scientific notation)으로 변환될수도 있다. 이는 무의미한 속성값이나 스타일 프로퍼티 값을 야기한다. 예를 들어, 0.0000001는 문자열 "1e-7"로 변환된다. 이는 불투명도 값을 보간할 때 확실히 들어난다. 과학적 표기법을 피하기위해서는 1e-6에서 트랜지션을 시작하거나 끝내야 한다. 1e-6은 문자열화 할 때, 지수 표기법(exponential notation)이 되지 않는 가장 작은 값이다.

# d3.interpolateRound(a, b)

a, b 두 수 사이를 보간하는 숫자형 인터폴레이터를 반환한다. 이 인터폴레이터는 interpolateNumber와 유사하지만 결과값을 반올림 한다.

# d3.interpolateString(a, b)

문자열 a, b 사이를 보간하는 문자열 인터폴레이터를 반환한다. 이 인터폴레이터는 다음 정규식으로 a 와 b 문자열에서 숫자를 찾는다.

/[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g

이 인터폴레이터는 b 문자열에 들어있는 각 숫자에 대해서 a 에서 일치하는 숫자를 찾는다. 일치하는 숫자를 찾으면, interpolateNumber를 사용해서 숫자형 인터폴레이터를 생성한다. b 문자열에서 남은 부분은 템플릿으로 사용한다. b 문자열의 변하지 않는 부분이 보간작업을 위한 상수가 되고 보간된 숫자 값이 그 템플릿에 포함된다. 예를 들어, a 가 "300 12px sans-serif"이고 b 가 "500 36px Comic-Sans"이면, 포함된 숫자는 두 개다. 문자열의 남은 변하지 않은 부분은 숫자들 사이의 공백(" ")과 접미사("px Comic-Sans")다. 그래서 t = .5 에서 해당 인터폴레이터의 결과값은 "400 24px Comic-Sans"이다.

# d3.interpolateRgb(a, b)

두 색상 a, b 사이를 보간하는 RGB 색공간(color space) 인터폴레이터를 반환한다. 색상 a 와 b 이 RBG일 필요는 없지만 d3.rgb를 사용해서 RGB로 변환된다. 빨강, 초록, 파랑 채널은 분수값이 없기 때문에 interpolateRound와 같은 방식으로 선형 보간된다. 이 인터폴레이터의 반환 값은 RGB 색을 나타내는 문자열이다. 빨강인 경우 "rgb(255,0,0)"이다.

# d3.interpolateHsl(a, b)

두 색상 a, b 사이를 보간하는 HSL 색공간(color space) 인터폴레이터를 반환한다. 색상 a 와 b 이 HSL일 필요는 없지만 d3.hsl를 사용해서 HSL로 변한된다. 색상, 채도, 명도는 interpolateNumber와 동일한 방식으로 선형 보간된다. (시작과 끝 색상사이 최단 경로가 사용된다.) 이 인터폴레이터의 반환값은 RGB 색상을 나타내는 문자열이다. 빨강인 경우 "#ff0000"이다. RGB 색상으로 반환하는 이유는 브라우저가 CSS에서 HSL 색상을 모두 지원하지는 않으므로 브라우저 호환성을 위해서 RGB 색상 문자열로 반환한다.

# d3.interpolateLab(a, b)

두 색상 a, b 사이를 보간하는 L*a*b* 색공간(color space) 인터폴레이터를 반환한다. 필요하다면 d3.lab를 사용해서 L*a*b* 로 변환한다. 색상 채널은 interpolateNumber과 동일한 방식으로 선형 보간된다. 이 인터폴레이터의 반환 값은 RGB 색상 문자열로 반환한다. 빨강인 경우 "#ff0000"이다.

# d3.interpolateHcl(a, b)

두 색상 a, b 사이를 보간하는 HCL 색공간(color space) 인터폴레이터를 반환한다. 필요하다면 d3.hcl를 사용해서 HCL로 변환한다. 색상 채널은 interpolateNumber와 같은 방식으로 선형 보간된다. (시작과 끝 색상 사이 최단 경로가 사용된다.) 이 인터폴레이터의 반환 값은 RGB 색상 문자열로 반환한다. 빨강인 경우 "#ff0000"이다.

# d3.interpolateArray(a, b)

두 배열 a, b 사이를 보간하는 배열 인터폴레이터를 반환한다. 내부적으로 배열의 탬플릿을 b 배열의 길이와 동일하게 생성한다. b 배열의 각 원소 색인에 해당하는 a 배열의 원소가 존재하면 두 원소를 위해 interpolate를 사용하는 제네릭 인터폴레이터가 생성된다. 원소가 일치하지 않으면 템플릿에서 b 의 배열 원소값을 고정값으로 사용하여 파라미터 t 를 위한 템플릿의 내장된 인터폴레이터들을 평가한다. 그리고 이렇게 업데이트된 배열 탬플릿을 반환한다. 예를 들어 배열 a 가 [0, 1]이고 배열 b 가 [1, 10, 100] 이면, 이 인터폴레이터의 반환값은 t = .5일 때, [.5, 5.5, 100]이다.

주의: 탬플릿 배열의 방어 복사본(defensive copy)을 만들지 않는다. 그러므로 반환된 배열의 변경은 이 인터폴레이터의 다음 평가에 안좋은 영향을 줄수도 있다. 인터폴레이터는 애니메이션 루프문의 일부일 수 있도록 빨라야만 하기 때문에 복사본를 만들지 않는다.

# d3.interpolateObject(a, b)

a 와 b 객체 사이를 보간하는 객체 인터폴레이터를 반환한다. 객체별 템플릿은 b 객체를 기준으로 동일한 프로퍼티를 생성한다. a 객체에 b 객체의 프로퍼티와 일치하는 프로퍼티가 있다면 interpolate를 사용해서 두 프로퍼티간의 제네릭 인터폴레이터를 생성한다. 일치하는 프로퍼티가 없는 경우는 템플릿에 b 객체의 프로퍼티 값을 고정값으로 사용하여 파라미터 t 를 위한 탬플릿의 내장된 인터폴레이터들을 평가한다. 그리고 이렇게 업데이트된 배열 탬플릿을 반환한다. 예를 들어 객체 a 가 {x: 0, y: 1}이고 객체 b 가 {x: 1, y: 10, z: 100}이면, 이 인터폴레이터의 반환값은 t = .5일 때, {x: .5, y: 5.5, z: 100}이다.

객체 보간작업은 데이터가 속성이 아닌 보간되는 데이터스페이스 보간작업(dataspace interpolation) 에 특히 유용하다. 예를 들어 파이 차트의 호(arc)를 기술하는 객체를 보간하는 경우 신규 SVG 패스 데이터를 계산하기 위해서 d3.svg.arc를 사용한다.

주의: 탬플릿 객체의 방어 복사본(defensive copy)을 만들지 않는다. 그러므로 반환된 객체의 변경은 이 인터폴레이터의 다음 평가에 안좋은 영향을 줄수도 있다. 인터폴레이터는 애니메이션 루프문의 일부일 수 있도록 빨라야만 하기 때문에 복사본를 만들지 않는다.

# d3.interpolateTransform(a, b)

a 와 b 로 표현되는 두개의 2D 아핀(affine) 변환(transform) 사이의 인터폴레이터를 반환한다. 각 변환은 표준 표현인 이동(translate), 회전(rotate), x축 비틀기(x-skew), 크기변경(scale)으로 분해해서 각 변환 컴포넌트들이 보간된다. 이는 CSS에 표준화되어있는 동작이다. matrix decomposition for animation를 참고하라.

(역자주) affine transform은 HTML 캔버스와 CSS에서 사용하는 2D 기하학 변환법이다.

# d3.geo.interpolate(a, b)

d3.geo.interpolate를 참고하라.

# d3.interpolators

d3.interpolate에서 사용하는 내장 인터폴레이터 팩토리 배열이다. 이 배열의 끝에 확장 인터폴레이터 팩토리를 추가(push)할 수 있다. 전달인자로 넘기는 두개의 입력값에 대한 보간을 지원하면 각 팩토리는 인터폴레이터 함수를 반환한다. 그렇지 않으면 팩토리는 false 값을 반환하고 다른 인터폴레이터를 시도해본다. 이 배열의 초기값은 시도하는 순서대로 다음과 같다.

  • interpolateNumber - 타입이 숫자인 경우
  • interpolateRgb - 타입이 색상인 경우
  • interpolateString - 타입이 문자열인 경우
  • interpolateArray - 타입이 배열인 경우
  • interpolateObject - 마지막 종착지

예를 들어, 화폐 표기(달러와 센트)를 위한 사용자 정의 인터폴레이터를 등록하는 경우에, 다음과 같이 한다.

d3.interpolators.push(function(a, b) {
  var re = /^\$([0-9,.]+)$/, ma, mb, f = d3.format(",.02f");
  if ((ma = re.exec(a)) && (mb = re.exec(b))) {
    a = parseFloat(ma[1]);
    b = parseFloat(mb[1]) - a;
    return function(t) {
      return "$" + f(a + b * t);
    };
  }
});

d3.interpolate("$20", "$10")(1/3) 는 $16.67를 반환한다.

Clone this wiki locally