-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
93 lines (85 loc) · 2.77 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Family Chart with Details</title>
<script src="code/d3.min.js"></script>
<script src="code/family-chart.js"></script>
<script src="data/data.js"></script>
<link rel="stylesheet" href="code/family-chart.css">
</head>
<body>
<div id="Overlay" onclick="closeDetailsForm()">
<div id="text"></div>
</div>
<div id="FamilyChart" class="f3" width="100%"></div>
<script>
const card_dim = {w:260,h:70,text_x:75,text_y:15,img_w:60,img_h:60,img_x:5,img_y:5}
const store = f3.createStore({
data: data,
node_separation: 270,
level_separation: 150
}),
view = f3.d3AnimationView({
store,
cont: document.querySelector("#FamilyChart")
}),
Card = f3.elements.Card({
store,
svg: view.svg,
card_dim: card_dim,
card_display: [
d => `${d.data['fn'] || ''} ${d.data['ln'] || ''}`,
d => `${d.data['label'] || ''}`
],
mini_tree: true,
link_break: true,
custom_elements: [{el: addDetailsButton(card_dim), lis: detailsButtonListener, query: ".customAddBtn"}],
})
view.setCard(Card)
store.setOnUpdate(props => view.update(props || {}))
store.update.tree({initial: true})
function addDetailsButton(card_dim) {
return (`
<g class="customAddBtn" style="cursor: pointer">
<g transform="translate(${card_dim.w-12},${card_dim.h-12})scale(.08)">
<circle r="100" fill="#fff" />
<g transform="translate(-50,-45)">
<line
x1="10" x2="90" y1="50" y2="50"
stroke="currentColor" stroke-width="20" stroke-linecap="round"
/>
<line
x1="50" x2="50" y1="10" y2="90"
stroke="currentColor" stroke-width="20" stroke-linecap="round"
/>
</g>
</g>
</g>
`)
}
function detailsButtonClicked(card_data) {
const person = card_data.data.data
return (`
<div id="text">
<div id="image"><img src="${person.avatar}" width="200px"/></div>
<div id="content">
<div>${person["label"] || ''}</div>
<div>${person["fn"] || ''} ${person["ln"] || ''}</div>
<div>${person["description"] || ''}</div>
</div>
</div>
`)
}
function detailsButtonListener(store, props) {
let el = document.getElementById("Overlay");
el.innerHTML = detailsButtonClicked(props.d)
el.style.display = "block";
}
function closeDetailsForm() {
document.getElementById("Overlay").style.display = "none";
}
</script>
</body>
</html>