forked from dagrejs/dagre-d3
-
Notifications
You must be signed in to change notification settings - Fork 0
/
user-defined-nodes.html
107 lines (87 loc) · 3.64 KB
/
user-defined-nodes.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
<!doctype html>
<meta charset="utf-8">
<title>Dagre D3 Demo: User-defined Node Shapes</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>
<h1>Dagre D3 Demo: User-defined Node Shapes</h1>
<style id="css">
text {
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
}
.node rect {
stroke: #999;
stroke-width: 1px;
fill: #fff;
}
.edgeLabel rect {
fill: #fff;
}
.edgePath path {
stroke: #333;
stroke-width: 1.5px;
fill: none;
}
</style>
<svg id="html" width=960 height=600>
<g>
<defs>
<g id="def-N0"><rect x=-25 y =-25 width=50 height=50 style="fill:steelblue;"/><circle cx=0 cy=0 r=20 fill="yellow"/><text x=-7 y=5 fill="#000">N0</text></g>
<g id="def-N1" transform="translate(-40,-20)"><polygon points="0,20 20,0 35,0 35,10, 20,10, 20,20 60,20 60,10 45,10 45,0 60,0 80,20 60,50 40,35 20,50" style="fill:lightgreen;stroke:black;stroke-width:2px;"/><text x=35 y=33 fill="#fff">N1</text></g>
<g id="def-N2" ><ellipse cx=0 cy=0 rx=50 ry=30 fill="#ffc0c0"/><text x=-7 y=5 fill="#fff">N2</text></g>
<g id="def-N3" transform="translate(-40,-20)"><polygon points="0,20 20,0 35,0 35,10, 20,10, 20,20 60,20 60,10 45,10 45,0 60,0 80,20 60,50 40,35 20,50" style="fill:lightgray;stroke:black;stroke-width:2px;"/><text x=35 y=33 fill="#fff">N3</text></g>
<g id="def-N4" ><circle cx=0 cy=0 r=30 fill="#f0b3ff"/><text x=-7 y=5 fill="#fff">N4</text></g>
<g id="def-N5" transform="translate(-98,-98)"><polygon points= "100,10 40,198 190,78 10,78 160,198" fill-rule="evenodd" style="fill:silver;"/>
</defs>
</g>
</svg>
<section>
<p>An example that demonstrates the use of custom SVG node shapes. See the
<code>defs</code> section of the <code>svg</code> element to see the shape
definitions.
</section>
<script id="js">
// Set up an SVG group so that we can translate the final graph.
var svg = d3.select('svg'),
svgGroup = svg.select('g');
var g = new dagreD3.Digraph();
// Render the graph from left-to-right, instead of the default top-to-bottom.
g.graph({ rankDir: 'LR' });
// Set up nodes. Note the use of 'useDef' which will search for a shape
// definition with the specified id.
g.addNode("N0", {label: "N0", useDef: "def-N0"});
g.addNode("N1", {label: "N1", useDef: "def-N1"});
g.addNode("N2", {label: "N2", useDef: "def-N2"});
g.addNode("N3", {label: "N3", useDef: "def-N3"});
g.addNode("N4", {label: "N4", useDef: "def-N4"});
g.addNode("N5", {label: "N5", useDef: "def-N5"});
g.addEdge(null, "N0", "N1", { label: "N0-N1" });
g.addEdge(null, "N0", "N2", { label: "N0-N2" });
g.addEdge(null, "N1", "N2", { label: "N1-N2" });
g.addEdge(null, "N2", "N3", { label: "N2-N3" });
g.addEdge(null, "N3", "N0", { label: "N3-N0" });
g.addEdge(null, "N3", "N4", { label: "N3-N4" });
g.addEdge(null, "N4", "N5", { label: "N4-N5" });
g.addEdge(null, "N5", "N0", { label: "N5-N0" });
// Create the renderer
var renderer = new dagreD3.Renderer();
// Tell the layout engine to separate ranks by 70 pixels
dagreD3.layout().rankSep(70);
// Set up the zoom for 70%
var initialZoom = 0.7;
var oldZoom = renderer.zoom();
renderer.zoom(function(graph, svg) {
var zoom = oldZoom(graph, svg);
zoom.scale(initialZoom).event(svg);
return zoom;
});
// Run the renderer. This is what draws the final graph.
var layout = renderer.run(g, svgGroup);
// Center the graph
var xCenterOffset = (svg.attr('width') - layout.graph().width * initialZoom) / 2;
svgGroup.attr('transform', 'translate(' + xCenterOffset + ', 20)');
svg.attr('height', layout.graph().height * initialZoom + 40);
</script>
<script src="demo.js"></script>