-
Notifications
You must be signed in to change notification settings - Fork 43
/
svg_renderer.html
132 lines (119 loc) · 4.1 KB
/
svg_renderer.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
<!DOCTYPE html>
<html>
<head>
<title>ccNetViz example for downloading SVG</title>
<link rel="stylesheet" type="text/css" href="css/template.css" />
<script src="./libs/jquery.min.js"></script>
<script src="./libs/json_prettyprint.js"></script>
<script type="text/javascript" src="js/spectrum.js"></script>
<script src="../lib/ccNetViz.js"></script>
<script src="../lib/plugins/ccNetViz-svg-renderer-plugin.js"></script>
</head>
<body>
<div class="canvas-container">
<p id="demo2"></p>
<h3 class="title">Downloading SVG Graph Image</h3>
<canvas id="container"></canvas>
<div class="toolbox">
<div class="item">
<a id="down_img"> Download </a>
</div>
</div>
<div class="description">
Press the button below the graph if you want to dowload it as an image.
<br />
More detailed information please visit the
<a href="https://helikarlab.github.io/ccNetViz/#doc"
>documentation page</a
>.
</div>
</div>
<header id="logo">
<a href="https://helikarlab.github.io/ccNetViz/">
<img src="images/logo.svg" />
</a>
</header>
<script>
function init() {
$('#showGraph').click(showGraph);
$.ajax({ url: 'data/graph-10-3.json', dataType: 'json' }).done(
dataLoaded
);
}
function dataLoaded(d) {
data = d;
showGraph();
}
function showGraph() {
var styles = {
svg: {
height: 500,
width: 500,
},
background: {
color: 'rgb(255, 255, 255)',
},
node: {
minSize: 8, //minimum size of node representation in pixels, default: 6
maxSize: 16, //maximum size of node representation in pixels, default: 16
color: 'rgb(148, 187, 247)', //node color (combined with node image), default: "rgb(255, 255, 255)"
texture: 'images/node.png', //node image
label: {
hideSize: 16,
color: 'rgb(120, 0, 0)', //label color, default: "rgb(120, 120, 120)"
},
},
edge: {
width: 2, //edge width in pixels, default: 1
color: 'rgb(204, 204, 204)',
arrow: {
minSize: 6, //minimum size of arrow in pixels, default: 6
maxSize: 12, //maximum size of arrow, default: 12
aspect: 2, //aspect of arrow image, default: 1
texture: 'images/arrow.png', //arrow image
hideSize: 2, //minimum size of arrow to be displayed
},
type: 'line',
},
};
var el = document.getElementById('container');
let svg = document.createElement('svg');
el.appendChild(svg);
el.getContext('webgl', { preserveDrawingBuffer: true });
var conf = {
styles: styles,
};
svg.setAttribute('id', 'downloadSVG');
svg.setAttribute('background-color', styles.background.color);
var graph = new ccNetVizAdvanced(el, conf);
graph.set(data.nodes, data.edges, 'force');
// this will draw an svg graph in the background
var svgGraph = new ccNetVizAdvanced(svg, conf);
svgGraph.set(data.nodes, data.edges).then(() => {
svgGraph.draw();
});
}
document.getElementById('down_img').addEventListener(
'click',
function() {
toDownload = document.getElementById('downloadSVG');
let dataURL = svgDataURL(toDownload);
download(dataURL);
},
false
);
function svgDataURL(svg) {
var svgAsXML = new XMLSerializer().serializeToString(svg);
return 'data:image/svg+xml,' + encodeURIComponent(svgAsXML);
}
function download(dataURL) {
var dl = document.createElement('a');
document.body.appendChild(dl); // This line makes it work in Firefox.
dl.setAttribute('href', dataURL);
dl.setAttribute('download', 'graph.svg');
dl.click();
}
$(init);
</script>
</body>
</html>