forked from dagrejs/dagre-d3
/
hover.html
197 lines (160 loc) · 5.8 KB
/
hover.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
<!doctype html>
<meta charset="utf-8">
<title>Dagre D3 Demo: Tooltip on Hover</title>
<link rel="stylesheet" href="demo.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="../build/dagre-d3.js"></script>
<!-- Pull in JQuery dependencies -->
<link rel="stylesheet" href="tipsy.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="tipsy.js"></script>
<h1>Dagre D3 Demo: Tooltip on Hover</h1>
<style id="css">
text {
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px;
}
.node rect {
stroke: #333;
fill: #fff;
}
.edgePath path {
stroke: #333;
fill: #333;
stroke-width: 1.5px;
}
.node text {
pointer-events: none;
}
/* This styles the title of the tooltip */
.tipsy .name {
font-size: 1.5em;
font-weight: bold;
color: #60b1fc;
margin: 0;
}
/* This styles the body of the tooltip */
.tipsy .description {
font-size: 1.2em;
}
</style>
<svg width=960 height=600></svg>
<section>
<p>The TCP state diagram
(<a href="http://www.rfc-editor.org/rfc/rfc793.txt">source: RFC 793</a>) with
hover support. Uses <a href="http://bl.ocks.org/ilyabo/1373263">tipsy JS and CSS</a>
for the tooltip.
</section>
<script id="js">
// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});
// States and transitions from RFC 793
var states = {
CLOSED: {
description: "represents no connection state at all.",
style: "fill: #f77"
},
LISTEN: {
description: "represents waiting for a connection request from any " +
"remote TCP and port."
},
"SYN SENT": {
description: "represents waiting for a matching connection " +
"request after having sent a connection request."
},
"SYN RCVD": {
description: "represents waiting for a confirming connection " +
"request acknowledgment after having both received and sent a " +
"connection request."
},
ESTAB: {
description: "represents an open connection, data received " +
"can be delivered to the user. The normal state for the data " +
"transfer phase of the connection.",
style: "fill: #7f7"
},
"FINWAIT-1": {
description: "represents waiting for a connection termination " +
"request from the remote TCP, or an acknowledgment of the " +
"connection termination request previously sent."
},
"FINWAIT-2": {
description: "represents waiting for a connection termination " +
"request from the remote TCP."
},
"CLOSE WAIT": {
description: "represents waiting for a connection termination " +
"request from the local user."
},
CLOSING: {
description: "represents waiting for a connection termination " +
"request acknowledgment from the remote TCP."
},
"LAST-ACK": {
description: "represents waiting for an acknowledgment of the " +
"connection termination request previously sent to the remote " +
"TCP (which includes an acknowledgment of its connection " +
"termination request)."
},
"TIME WAIT": {
description: "represents waiting for enough time to pass to be " +
"sure the remote TCP received the acknowledgment of its " +
"connection termination request."
}
};
// Add states to the graph, set labels, and style
Object.keys(states).forEach(function(state) {
var value = states[state];
value.label = state;
value.rx = value.ry = 5;
g.setNode(state, value);
});
// Set up the edges
g.setEdge("CLOSED", "LISTEN", { label: "open" });
g.setEdge("LISTEN", "SYN RCVD", { label: "rcv SYN" });
g.setEdge("LISTEN", "SYN SENT", { label: "send" });
g.setEdge("LISTEN", "CLOSED", { label: "close" });
g.setEdge("SYN RCVD", "FINWAIT-1", { label: "close" });
g.setEdge("SYN RCVD", "ESTAB", { label: "rcv ACK of SYN" });
g.setEdge("SYN SENT", "SYN RCVD", { label: "rcv SYN" });
g.setEdge("SYN SENT", "ESTAB", { label: "rcv SYN, ACK" });
g.setEdge("SYN SENT", "CLOSED", { label: "close" });
g.setEdge("ESTAB", "FINWAIT-1", { label: "close" });
g.setEdge("ESTAB", "CLOSE WAIT", { label: "rcv FIN" });
g.setEdge("FINWAIT-1", "FINWAIT-2", { label: "rcv ACK of FIN" });
g.setEdge("FINWAIT-1", "CLOSING", { label: "rcv FIN" });
g.setEdge("CLOSE WAIT", "LAST-ACK", { label: "close" });
g.setEdge("FINWAIT-2", "TIME WAIT", { label: "rcv FIN" });
g.setEdge("CLOSING", "TIME WAIT", { label: "rcv ACK of FIN" });
g.setEdge("LAST-ACK", "CLOSED", { label: "rcv ACK of FIN" });
g.setEdge("TIME WAIT", "CLOSED", { label: "timeout=2MSL" });
// Create the renderer
var render = new dagreD3.render();
// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
inner = svg.append("g");
// Set up zoom support
var zoom = d3.behavior.zoom().on("zoom", function() {
inner.attr("transform", "translate(" + d3.event.translate + ")" +
"scale(" + d3.event.scale + ")");
});
svg.call(zoom);
// Simple function to style the tooltip for the given node.
var styleTooltip = function(name, description) {
return "<p class='name'>" + name + "</p><p class='description'>" + description + "</p>";
};
// Run the renderer. This is what draws the final graph.
render(inner, g);
inner.selectAll("g.node")
.attr("title", function(v) { return styleTooltip(v, g.node(v).description) })
.each(function(v) { $(this).tipsy({ gravity: "w", opacity: 1, html: true }); });
// Center the graph
var initialScale = 0.75;
zoom
.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
.scale(initialScale)
.event(svg);
svg.attr('height', g.graph().height * initialScale + 40);
</script>
<script src="demo.js"></script>