Skip to content

Commit 0420a7e

Browse files
chethankambichethankambi
authored
Add files via upload
1 parent f2f6339 commit 0420a7e

File tree

2 files changed

+162
-0
lines changed

2 files changed

+162
-0
lines changed

‎transitions/d3_transitions.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Transitions</title>
8+
</head>
9+
10+
<body>
11+
12+
<h1>Transitions</h1>
13+
14+
<div>
15+
<svg width='700' height='400'></svg>
16+
</div>
17+
18+
<script src="/d3minlib/d3.min_v6.31.js"></script>
19+
<script src="d3_transitions.js"></script>
20+
</body>
21+
22+
</html>

‎transitions/d3_transitions.js

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/*
2+
A transition is a selection-like interface for animating changes to the DOM. Instead of applying changes instantaneously, transitions smoothly interpolate the DOM from its current state to the desired target state over a given duration.
3+
*/
4+
5+
const SVG_WIDTH = document.querySelector('svg').clientWidth;
6+
const SVG_HEIGHT = document.querySelector('svg').clientHeight;
7+
8+
const rectData =
9+
[10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130];
10+
11+
let allRect =
12+
d3.select('svg')
13+
.selectAll('rect')
14+
.data(rectData)
15+
.join('rect')
16+
.attr('x', (d, i) => (i * SVG_WIDTH / rectData.length))
17+
.attr('y', d => SVG_HEIGHT - d * 3)
18+
.attr('width', SVG_WIDTH / rectData.length - 2)
19+
// .attr('height', d => d * 3)
20+
.attr('rx', '5')
21+
.attr('ry', '5')
22+
23+
// CREATE A TRANSITION ON RECT ELEMENTS
24+
25+
// There are 2 ways to set transitions
26+
// A. using the selection.transition(), followed by other transition methods (delay, ease and duration)
27+
// B. create a transition object using d3.transition(), followed by other transition methods and then call the transition() method on the selection and then pass the transition object into the transition() method
28+
29+
// Just duration is enough to see the transitions
30+
// If delay needed then delay --> duration
31+
// If duartion and ease needed then ease --> duration
32+
// If all three needed then delay --> ease --> duration
33+
34+
// Process A
35+
// 1. Just duration
36+
// allRect
37+
// .transition()
38+
// .duration(2000)
39+
// .attr('height', d => d * 3)
40+
// .transition()
41+
// .duration(2000)
42+
// .style('fill', 'pink');
43+
44+
// 2. duartion and delay
45+
// allRect
46+
// .transition()
47+
// .delay(1000)
48+
// .duration(2000)
49+
// .attr('height', d => d * 3)
50+
// .transition()
51+
// .delay(1000)
52+
// .duration(2000)
53+
// .style('fill', 'salmon');
54+
55+
// 3. duartion and ease
56+
// allRect
57+
// .transition()
58+
// .ease(d3.easeBounce)
59+
// .duration(2000)
60+
// .attr('height', d => d * 3)
61+
// .transition()
62+
// .ease(d3.easeBounce)
63+
// .duration(5000)
64+
// .style('fill', 'crimson');
65+
66+
// 4. all 3
67+
// allRect
68+
// .transition()
69+
// .delay(1000)
70+
// .ease(d3.easeBounce)
71+
// .duration(2000)
72+
// .attr('height', d => d * 3)
73+
// .transition()
74+
// .delay(1000)
75+
// .ease(d3.easeBounce)
76+
// .duration(5000)
77+
// .style('fill', 'slategrey');
78+
79+
// Process B
80+
// 1. only duration
81+
// let T1 = d3.transition()
82+
// .duration(2000);
83+
// console.log(T1);
84+
// allRect.transition(T1)
85+
// .attr('height', d => d * 3)
86+
// .attr('fill', 'khaki');
87+
88+
// 2. duration and delay
89+
// let T1 = d3.transition()
90+
// .delay(1000)
91+
// .duration(2000);
92+
// let T2 = d3.transition()
93+
// .delay(1000)
94+
// .duration(2000);
95+
// allRect
96+
// .transition(T1)
97+
// .attr('height', d => d * 3)
98+
// //.transition(T2) // can comment this
99+
// .style('fill', 'khaki');
100+
101+
// 3. duration and ease
102+
// let T1 = d3.transition()
103+
// .ease(d3.easeExp)
104+
// .duration(2000);
105+
// let T2 = d3.transition()
106+
// .ease(d3.easeSinOut)
107+
// .duration(2000);
108+
// allRect
109+
// .transition(T1)
110+
// .attr('height', d => d * 3)
111+
// //.transition(T2) // can comment this
112+
// .style('fill', 'khaki');
113+
114+
// 4. all 3
115+
// let T1 = d3.transition()
116+
// .delay(1000)
117+
// .ease(d3.easeCircleIn)
118+
// .duration(2000);
119+
// let T2 = d3.transition()
120+
// .delay(1000)
121+
// .ease(d3.easeSinOut)
122+
// .duration(2000);
123+
// allRect
124+
// .transition(T1)
125+
// .attr('height', d => d * 3)
126+
// .transition(T2) // can comment this
127+
// .style('fill', 'khaki');
128+
129+
// to control elements individually
130+
allRect.each((d, i, n) => {
131+
d3.select(n[i])
132+
.transition()
133+
.delay(i * d)
134+
.duration(i * d)
135+
.attr('height', d => d * 3)
136+
.transition()
137+
.delay(i * d)
138+
.duration(i * d)
139+
.style('fill', d3.interpolateBlues((i + 1) / rectData.length))
140+
})

0 commit comments

Comments
 (0)