제9장 D3의 과도transition
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; });
후주
일단 과도 효과를 만들면 변경할 수 없습니다. 만약에 한 요소의 속성이 과도를 하고 있다면 이 속성의 다른 과도가 시작되면 이전의 과도는 종료됩니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSON
JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다.
그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다.
저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
간단한 예
//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; });
후주
일단 과도 효과를 만들면 변경할 수 없습니다. 만약에 한 요소의 속성이 과도를 하고 있다면 이 속성의 다른 과도가 시작되면 이전의 과도는 종료됩니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
