-
Notifications
You must be signed in to change notification settings - Fork 66
/
descendants-oop.html
434 lines (365 loc) · 11.1 KB
/
descendants-oop.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
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
<!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 boxWidth = 150,
boxHeight = 40,
nodeWidth = 100,
nodeHeight = 200,
// duration of transitions in ms
duration = 750,
// d3 multiplies the node size by this value
// to calculate the distance between nodes
separation = .5;
/**
* For the sake of the examples, I want the setup code to be at the top.
* However, since it uses a class (Tree) which is defined later, I wrap
* the setup code in a function at call it at the end of the example.
* Normally you would extract the entire Tree class defintion into a
* separate file and include it before this script tag.
*/
function setup() {
// 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)");
// One tree to display the ancestors
var ancestorTree = new Tree(svg, 'ancestor', 1);
ancestorTree.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 = new Tree(svg, 'descendant', -1);
descendantsTree.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.
var ancestorRoot = rootProxy(json);
var descendantRoot = rootProxy(json);
// Start with only the first few generations of ancestors showing
ancestorRoot._parents.forEach(function(parents){
parents._parents.forEach(collapse);
});
// Start with only one generation of descendants showing
descendantRoot._children.forEach(collapse);
// Set the root nodes
ancestorTree.data(ancestorRoot);
descendantsTree.data(descendantRoot);
// Draw the tree
ancestorTree.draw(ancestorRoot);
descendantsTree.draw(descendantRoot);
});
}
function rootProxy(root){
return {
name: root.name,
id: root.id,
x0: 0,
y0: 0,
_children: root._children,
_parents: root._parents,
collapsed: false
};
}
/**
* Shared code for drawing ancestors or descendants.
* `selector` is a class that will be applied to links
* and nodes so that they can be queried later when
* the tree is redrawn.
* `direction` is either 1 (forward) or -1 (backward).
*/
var Tree = function(svg, selector, direction){
this.svg = svg;
this.selector = selector;
this.direction = direction;
this.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([nodeWidth, nodeHeight])
// 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 separation;
});
};
/**
* Set the `children` function for the tree
*/
Tree.prototype.children = function(fn){
this.tree.children(fn);
return this;
};
/**
* Set the root of the tree
*/
Tree.prototype.data = function(data){
this.root = data;
return this;
};
/**
* Draw/redraw the tree
*/
Tree.prototype.draw = function(source){
if(this.root){
var nodes = this.tree.nodes(this.root),
links = this.tree.links(nodes);
this.drawLinks(links, source);
this.drawNodes(nodes, source);
} else {
throw new Error('Missing root');
}
return this;
};
/**
* Draw/redraw the connecting lines
*/
Tree.prototype.drawLinks = function(links, source){
var self = this;
// Update links
var link = self.svg.selectAll("path.link." + self.selector)
// 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 " + self.selector)
.attr("d", function(d) {
var o = {x: source.x0, y: self.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, self.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: self.direction * (source.y + boxWidth/2)};
return transitionElbow({source: o, target: o});
})
.remove();
};
/**
* Draw/redraw the person boxes.
*/
Tree.prototype.drawNodes = function(nodes, source){
var self = this;
// Update nodes
var node = self.svg.selectAll("g.person." + self.selector)
// 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 " + self.selector)
// 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(' + (self.direction * (source.y0 + boxWidth/2)) + ',' + source.x0 + ')';
})
.on('click', function(person){
self.togglePerson(person);
});
// 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(" + (self.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(" + (self.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.
*/
Tree.prototype.togglePerson = function(person){
// Don't allow the root to be collapsed because that's
// silly (it also makes our life easier)
if(person === this.root){
return;
}
// Non-root nodes
else {
if(person.collapsed){
person.collapsed = false;
} else {
collapse(person);
}
this.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);
}
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;
}
setup();
</script>