-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
106 lines (96 loc) · 2.7 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
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cmap</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
<style>
body { margin: 0; padding: 0; }
div {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<main>
<button id="btn-save-svg">Save</button>
<div id="plot"></div>
</main>
</body>
<script type="module">
import clusterMap from "./src/clusterMap.js"
function serialise(svg) {
/* Saves the figure to SVG in its current state.
* Clones the provided SVG and sets the width/height of the clone to the
* bounding box of the original SVG. Thus, downloaded figures will be sized
* correctly.
* This function returns a new Blob, which can then be downloaded.
*/
let node = svg.node();
const xmlns = "http://www.w3.org/2000/xmlns/";
const xlinkns = "http://www.w3.org/1999/xlink";
const svgns = "http://www.w3.org/2000/node";
const bbox = svg.select("g").node().getBBox()
node = node.cloneNode(true);
node.setAttribute("width", bbox.width);
node.setAttribute("height", bbox.height);
node.setAttributeNS(xmlns, "xmlns", svgns);
node.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
// Adjust x/y of <g> to account for axis/title position.
// Replaces the transform attribute, so drag/zoom is ignored.
d3.select(node)
.select("g")
.attr("transform", `translate(${Math.abs(bbox.x)}, ${Math.abs(bbox.y)})`)
const serializer = new window.XMLSerializer;
const string = serializer.serializeToString(node);
return new Blob([string], {type: "image/node+xml"});
}
function download(blob, filename) {
/* Downloads a given blob to filename.
* This function appends a new anchor to the document, which points to the
* supplied blob. The anchor.click() method is called to trigger the download,
* then the anchor is removed.
*/
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
const div = d3.select("#plot")
.attr("width", "100vw")
.attr("height", "100vh")
const chart = clusterMap()
.config({
cluster: {
alignLabels: false
},
gene: {
label: {
show: false
}
},
link: {
threshold: 0.3,
bestOnly: true,
}
})
d3.json("testing.json")
.then(data => {
div.selectAll("div")
.data([data])
.join("div")
.call(chart)
let svg = div.select("svg")
d3.select("#btn-save-svg")
.on("click", () => {
const blob = serialise(svg)
download(blob, "clinker.svg")
})
})
</script>
</html>