-
Notifications
You must be signed in to change notification settings - Fork 66
/
transitions.html
309 lines (259 loc) · 7.75 KB
/
transitions.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
text-align: center;
}
svg {
margin-top: 32px;
border: 1px solid #aaa;
}
.person rect {
fill: #fff;
stroke: steelblue;
stroke-width: 1px;
}
.person {
font: 14px sans-serif;
cursor: pointer;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
</style>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var root;
var boxWidth = 150,
boxHeight = 40,
duration = 750; // duration of transitions in ms
// Setup zoom and pan
var zoom = d3.behavior.zoom()
.scaleExtent([.1,1])
.on('zoom', function(){
svg.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
})
// Offset so that first pan and zoom does not jump back to the origin
.translate([150, 200]);
var svg = d3.select("body").append("svg")
.attr('width', 1000)
.attr('height', 500)
.call(zoom)
.append('g')
// Left padding of tree so that the whole root node is on the screen.
// TODO: find a better way
.attr("transform", "translate(150,200)");
var tree = d3.layout.tree()
// Using nodeSize we are able to control
// the separation between nodes. If we used
// the size parameter instead then d3 would
// calculate the separation dynamically to fill
// the available space.
.nodeSize([100, 200])
// By default, cousins are drawn further apart than siblings.
// By returning the same value in all cases, we draw cousins
// the same distance apart as siblings.
.separation(function(){
return .5;
})
// Tell d3 what the child nodes are. Remember, we're drawing
// a tree so the ancestors are child nodes.
.children(function(person){
// If the person is collapsed then tell d3
// that they don't have any ancestors.
if(person.collapsed){
return;
} else {
return person._parents;
}
});
d3.json('data/8gens.json', function(error, json){
if(error) {
return console.error(error);
}
// Start with only the first few generations showing
json._parents.forEach(function(gen2){
gen2._parents.forEach(function(gen3){
collapse(gen3);
});
});
root = json;
root.x0 = 0;
root.y0 = 0;
draw(root);
});
function draw(source){
var nodes = tree.nodes(root),
links = tree.links(nodes);
// Update links
var link = svg.selectAll("path.link")
// The function we are passing provides d3 with an id
// so that it can track when data is being added and removed.
// This is not necessary if the tree will only be drawn once
// as in the basic example.
.data(links, function(d){ return d.target.id; });
// Add new links
// Transition new links from the source's
// old position to the links final position
link.enter().append("path")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: (source.y0 + boxWidth/2)};
return transitionElbow({source: o, target: o});
});
// Update the old links positions
link.transition()
.duration(duration)
.attr("d", elbow);
// Remove any links we don't need anymore
// if part of the tree was collapsed
// Transition exit links from their current position
// to the source's new position
link.exit()
.transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: (source.y + boxWidth/2)};
return transitionElbow({source: o, target: o});
})
.remove();
// Update nodes
var node = svg.selectAll("g.person")
// The function we are passing provides d3 with an id
// so that it can track when data is being added and removed.
// This is not necessary if the tree will only be drawn once
// as in the basic example.
.data(nodes, function(person){ return person.id; });
// Add any new nodes
var nodeEnter = node.enter().append("g")
.attr("class", "person")
// Add new nodes at the right side of their child's box.
// They will be transitioned into their proper position.
.attr('transform', function(person){
return 'translate(' + (source.y0 + boxWidth/2) + ',' + source.x0 + ')';
})
.on('click', togglePerson);
// Draw the rectangle person boxes.
// Start new boxes with 0 size so that
// we can transition them to their proper size.
nodeEnter.append("rect")
.attr({
x: 0,
y: 0,
width: 0,
height: 0
});
// Draw the person's name and position it inside the box
nodeEnter.append("text")
.attr("dx", 0)
.attr("dy", 0)
.attr("text-anchor", "start")
.attr('class', 'name')
.text(function(d) {
return d.name;
})
.style('fill-opacity', 0);
// Update the position of both old and new nodes
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
// Grow boxes to their proper size
nodeUpdate.select('rect')
.attr({
x: -(boxWidth/2),
y: -(boxHeight/2),
width: boxWidth,
height: boxHeight
});
// Move text to it's proper position
nodeUpdate.select('text')
.attr("dx", -(boxWidth/2) + 10)
.style('fill-opacity', 1);
// Remove nodes we aren't showing anymore
var nodeExit = node.exit()
.transition()
.duration(duration)
// Transition exit nodes to the source's position
.attr("transform", function(d) { return "translate(" + (source.y + boxWidth/2) + "," + source.x + ")"; })
.remove();
// Shrink boxes as we remove them
nodeExit.select('rect')
.attr({
x: 0,
y: 0,
width: 0,
height: 0
});
// Fade out the text as we remove it
nodeExit.select('text')
.style('fill-opacity', 0)
.attr('dx', 0);
// Stash the old positions for transition.
nodes.forEach(function(person) {
person.x0 = person.x;
person.y0 = person.y;
});
}
/**
* Update a person's state when they are clicked.
*/
function togglePerson(person){
if(person.collapsed){
person.collapsed = false;
} else {
collapse(person);
}
draw(person);
}
/**
* Collapse person (hide their ancestors). We recursively
* collapse the ancestors so that when the person is
* expanded it will only reveal one generation. If we don't
* recursively collapse the ancestors then when
* the person is clicked on again to expand, all ancestors
* that were previously showing will be shown again.
* If you want that behavior then just remove the recursion
* by removing the if block.
*/
function collapse(person){
person.collapsed = true;
if(person._parents){
person._parents.forEach(collapse);
}
}
/**
* Custom path function that creates straight connecting
* lines. Calculate start and end position of links.
* Instead of drawing to the center of the node,
* draw to the border of the person profile box.
* That way drawing order doesn't matter. In other
* words, if we draw to the center of the node
* then we have to draw the links first and the
* draw the boxes on top of them.
*/
function elbow(d) {
var sourceX = d.source.x,
sourceY = d.source.y + (boxWidth / 2),
targetX = d.target.x,
targetY = d.target.y - (boxWidth / 2);
return "M" + sourceY + "," + sourceX
+ "H" + (sourceY + (targetY-sourceY)/2)
+ "V" + targetX
+ "H" + targetY;
}
/**
* Use a different elbow function for enter
* and exit nodes. This is necessary because
* the function above assumes that the nodes
* are stationary along the x axis.
*/
function transitionElbow(d){
return "M" + d.source.y + "," + d.source.x
+ "H" + d.source.y
+ "V" + d.source.x
+ "H" + d.source.y;
}
</script>