forked from justincy/d3-pedigree-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
expandable.html
224 lines (183 loc) · 5.4 KB
/
expandable.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
<!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 data;
var boxWidth = 150,
boxHeight = 40;
// 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);
});
});
data = json;
draw();
});
function draw(){
var nodes = tree.nodes(data),
links = tree.links(nodes);
// 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")
.on('click', togglePerson);
// Draw the rectangle person boxes
nodeEnter.append("rect")
.attr({
x: -(boxWidth/2),
y: -(boxHeight/2),
width: boxWidth,
height: boxHeight
});
// Draw the person's name and position it inside the box
nodeEnter.append("text")
.attr("dx", -(boxWidth/2) + 10)
.attr("dy", 0)
.attr("text-anchor", "start")
.attr('class', 'name')
.text(function(d) {
return d.name;
});
// Update the position of both old and new nodes
node.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
// Remove nodes we aren't showing anymore
node.exit().remove();
// 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
link.enter().append("path")
.attr("class", "link");
// Remove any links we don't need anymore
// if part of the tree was collapsed
link.exit().remove();
// Update the links positions (old and new)
link.attr("d", elbow);
}
/**
* Update a person's state when they are clicked.
*/
function togglePerson(person){
if(person.collapsed){
person.collapsed = false;
} else {
collapse(person);
}
draw();
}
/**
* 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;
}
</script>