D3.js-전환 API

D3 전환은 요소와 각 요소를 선택합니다. 요소의 현재 정의 부분에 전환을 적용합니다.

API 구성

다음 스크립트를 사용하여 전환 API를 구성 할 수 있습니다.

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script>

</script>

전환 API 메서드

Transition API 메서드를 자세히 살펴 보겠습니다.

요소 선택

다양한 선택 요소에 대해 자세히 논의하겠습니다.

selection.transition([name])−이 방법은 이름으로 새로운 선택 전환을 반환하는 데 사용됩니다. 이름이 지정되지 않은 경우 null을 반환합니다.
selection.interrupt([name]) −이 방법은 전환의 선택된 요소를 이름으로 중단하는 데 사용되며 아래와 같이 정의됩니다.

selection.interrupt().selectAll("*").interrupt();

d3.interrupt(node[, name]) −이 방법은 지정된 노드에서 지정된 이름의 전환을 중단하는 데 사용됩니다.
d3.transition([name]) −이 메서드는 지정된 이름으로 새로운 전환을 반환하는 데 사용됩니다.
transition.select(selector) −이 방법은 지정된 선택자와 일치하는 첫 번째 요소를 선택하고 결과 선택에서 전환을 반환하는 데 사용됩니다.

transition
   .selection()
   .select(selector)
   .transition(transition)

transition.selectAll(selector)−이 방법은 지정된 선택기와 일치하는 모든 요소를 선택하고 결과 선택에 대한 전환을 반환하는 데 사용됩니다. 아래에 정의되어 있습니다-

transition
   .selection()
   .selectAll(selector)
   .transition(transition)

transition.filter(filter) −이 방법은 지정된 필터와 일치하는 요소를 선택하는 데 사용되며 다음과 같이 정의됩니다.

transition
   .selection()
   .filter(filter)
   .transition(transition)

transition.merge(other)−이 방법은 전환을 다른 전환과 병합하는 데 사용됩니다. 아래에 정의되어 있습니다.

transition
   .selection()
   .merge(other.selection())
   .transition(transition)

transition.transition()−이 방법은 선택한 요소에 새로운 전환을 반환하는 데 사용됩니다. 전환이 중지되면 시작되도록 예약되어 있습니다. 새 전환은이 전환의 이름, 지속 시간 및 여유를 상속합니다.

Example − 다음 예를 살펴 보겠습니다.

d3.selectAll(".body")
   .transition() 
   
   // fade to yellow.
   .style("fill", "yellow")
   .transition() 
   
   // Wait for five second. Then change blue, and remove.
   .delay(5000)
   .style("fill", "blue")
   .remove();

여기에서 몸은 노란색으로 사라지고 마지막 전환이 시작되기 5 초 전에 시작됩니다.

d3.active(node[, name]) −이 메서드는 이름으로 지정된 노드에서 전환을 반환하는 데 사용됩니다.

타이밍 방법

전환 타이밍 API 메서드를 자세히 살펴 보겠습니다.

transition.delay([value])−이 방법은 전환 지연을 지정된 값으로 설정하는 데 사용됩니다. 함수가 선택된 각 요소에 대해 평가되면 컨텍스트를 현재 DOM 요소로 사용하여 현재 데이텀 'd'및 인덱스 'i'로 전달됩니다. 값이 지정되지 않은 경우 전환의 첫 번째 (null이 아닌) 요소에 대한 지연의 현재 값을 반환합니다. 아래에 정의되어 있습니다.

transition.delay(function(d, i) { return i * 10; });

transition.duration([value])−이 방법은 전환 시간을 지정된 값으로 설정하는 데 사용됩니다. 값이 지정되지 않은 경우 전환의 첫 번째 (null이 아닌) 요소에 대한 기간의 현재 값을 반환합니다.
transition.ease([value])−이 방법은 선택한 요소의 전환 값을 쉽게하는 데 사용됩니다. 여유 함수는 애니메이션의 각 프레임에 대해 호출되고 [0, 1] 범위에서 정규화 된 시간 't'를 전달합니다. 값을 지정하지 않으면 전환의 첫 번째 (null이 아닌) 요소에 대한 현재 여유 함수를 반환합니다.

다음 장에서는 d3.js의 드래그 앤 드롭 개념에 대해 설명합니다.