제9장 D3의 과도transition

1708 단어

ease


전환 방식 설정

d3-transition


간단한 예
//1
rects.transition()
        .duration(130)
        .attr('y', function (d, i) { return 200 - y(d) })
        .attr('height', function (d, i) { return y(d) })
//2
var t = d3.transition()
    .duration(750)
    .ease(d3.easeLinear);

d3.selectAll(".apple").transition(t)
    .style("fill", "red");

d3.selectAll(".orange").transition(t)
    .style("fill", "orange");

interrupt([name])


선택 집합에서 활동하는 이름name의 전환을 중단합니다.만약name이 표시하는 과도가 시작되지 않았다면, 시작할 필요가 없습니다.name이 지정되지 않으면null을 사용합니다.

filter(filter)


변환 세트의 요소 필터링

merge(other)


두 개의 과도 집합을 합쳐서 등가
transition
  .selection()
  .merge(other.selection())
  .transition(transition)

d3.active(node[, name])


지정된 노드에name라는 활동의 전환을 되돌려줍니다.지정name이 없으면null을 사용합니다.이 방법은 체인식 과도를 쉽게 만들 수 있습니다. 예를 들어 순환 디스코 과도를 만들 수 있습니다.
d3.selectAll("circle").transition()
    .delay(function(d, i) { return i * 50; })
    .on("start", function repeat() {
        d3.active(this)
            .style("fill", "red")
          .transition()
            .style("fill", "green")
          .transition()
            .style("fill", "blue")
          .transition()
            .on("start", repeat);
      });

delay()


지연 시간 설정 또는 가져오기
transition.delay(function(d, i) { return i * 10; });

후주


일단 과도 효과를 만들면 변경할 수 없습니다. 만약에 한 요소의 속성이 과도를 하고 있다면 이 속성의 다른 과도가 시작되면 이전의 과도는 종료됩니다.

좋은 웹페이지 즐겨찾기