-
Notifications
You must be signed in to change notification settings - Fork 66
/
Copy pathdescendants.html
379 lines (321 loc) · 9.89 KB
/
descendants.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
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
<!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 ancestorRoot, descendantRoot;
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([400, 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(400,200)");
var ancestorsTree = 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;
}
});
// Use a separate tree to display the descendants
var descendantsTree = d3.layout.tree()
.nodeSize([100, 200])
.separation(function(){
return .5;
})
.children(function(person){
if(person.collapsed){
return;
} else {
return person._children;
}
});
d3.json('data/8gens.json', function(error, json){
if(error) {
return console.error(error);
}
// D3 modifies the objects by setting properties such as
// coordinates, parent, and children. Thus the same node
// node can't exist in two trees. But we need the root to
// be in both so we create proxy nodes for the root only.
ancestorRoot = rootProxy(json);
descendantRoot = rootProxy(json);
// Start with only the first few generations showing
ancestorRoot._parents.forEach(function(parents){
parents._parents.forEach(collapse);
});
descendantRoot._children.forEach(collapse);
drawAncestors(ancestorRoot);
drawDescendants(descendantRoot);
});
function rootProxy(root){
return {
name: root.name,
id: root.id,
x0: 0,
y0: 0,
_children: root._children,
_parents: root._parents,
collapsed: false
};
}
function drawAncestors(source){
draw(source, ancestorsTree, ancestorRoot, 'ancestor', 1);
}
function drawDescendants(source){
draw(source, descendantsTree, descendantRoot, 'descendant', -1);
}
function draw(source, tree, root, displayClass, direction){
var nodes = tree.nodes(root),
links = tree.links(nodes);
// Update links
var link = svg.selectAll("path.link." + displayClass)
// 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 " + displayClass)
.attr("d", function(d) {
var o = {x: source.x0, y: direction * (source.y0 + boxWidth/2)};
return transitionElbow({source: o, target: o});
});
// Update the old links positions
link.transition()
.duration(duration)
.attr("d", function(d){
return elbow(d, direction);
});
// 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: direction * (source.y + boxWidth/2)};
return transitionElbow({source: o, target: o});
})
.remove();
// Update nodes
var node = svg.selectAll("g.person." + displayClass)
// 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 " + displayClass)
// 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(' + (direction * (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(" + (direction * 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(" + (direction * (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){
// Figure out of the root node was clicked. Remember
// we have two proxy root nodes so we have handle both.
if(person === ancestorRoot || person === descendantRoot){
if(ancestorRoot.collapsed){
ancestorRoot.collapsed = false;
descendantRoot.collapsed = false;
} else {
collapse(ancestorRoot);
collapse(descendantRoot);
}
drawDescendants(descendantRoot);
drawAncestors(ancestorRoot);
}
// Non-root nodes
else {
if(person.collapsed){
person.collapsed = false;
} else {
collapse(person);
}
// Figure out which tree the person belongs too.
// Don't need to redraw when leaf nodes are
// toggled because they don't expand or collapse,
// therefore we don't account for them.
if(person._children){
drawDescendants(person);
} else if(person._parents){
drawAncestors(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);
}
if(person._children){
person._children.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, direction) {
var sourceX = d.source.x,
sourceY = d.source.y + (boxWidth / 2),
targetX = d.target.x,
targetY = d.target.y - (boxWidth / 2);
return "M" + (direction * sourceY) + "," + sourceX
+ "H" + (direction * (sourceY + (targetY-sourceY)/2))
+ "V" + targetX
+ "H" + (direction * 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>