diff --git a/www/graph.css b/www/graph.css
index 8af3e5e..3c110ad 100644
--- a/www/graph.css
+++ b/www/graph.css
@@ -117,7 +117,7 @@ svg #header text#subtitle {
text-anchor: start;
dominant-baseline: hanging;
/*achieves a 'text-anchor: top'*/
- font-size: 16pt;
+ /* font-size: 16pt; */ /*Set this in JS*/
transition: font-size .4s, opacity 1s;
fill: white;
opacity: 1;
@@ -130,7 +130,7 @@ svg #header text#subtitle {
}
svg.zoomed .node text.nodeTitle {
- font-size: 6pt;
+ /* font-size: 6pt; */
}
svg.zoomed.zoomed2 .node text.nodeTitle {
diff --git a/www/graph.js b/www/graph.js
index df6faa4..62743d1 100644
--- a/www/graph.js
+++ b/www/graph.js
@@ -226,7 +226,24 @@ class NodeMap {
render() {
this.svg = this.root.append('svg')
- this.svg.append('defs').html('');
+ this.svg.append('defs').html(`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `);
this.resize();
@@ -276,6 +293,7 @@ class NodeMap {
.attr("class", "borders")
.attr("d", this.proj(this.borders))
+ let zoomTimeout = null;
const zoom = d3.zoom().scaleExtent([0.2, 10]).on("start", () => {
this.svg.node().classList.add("dragging");
}).on("end", () => {
@@ -284,18 +302,20 @@ class NodeMap {
this.container.attr("transform", transform);
const oldZoom = this.svg.classed('zoomed');
const newZoom = transform.k > 2.0;
- if (oldZoom != newZoom) {
- this.svg.classed('zoomed', newZoom);
-
+ if(zoomTimeout) {
+ clearTimeout(zoomTimeout)
+ }
+ zoomTimeout = setTimeout(() => {
+ this.g_nodes.attr('style', `font-size:${22000 / this.height / transform.k}pt`)
setTimeout(() => {
this.calculateLabels();
}, 500);
+ }, 500);
+ if (oldZoom != newZoom) {
+ this.svg.classed('zoomed', newZoom);
+
}
});
- this.svg
- .call(zoom)
- .call(zoom.transform, d3.zoomIdentity.scale(.5, .5));
-
this.title = this.container.append('g').attr('id', 'header');
const titleFeature = {
@@ -342,8 +362,9 @@ class NodeMap {
this.link = this.container.append("g")
.attr('class', 'links')
.selectAll(".link");
- this.node = this.container.append("g")
- .attr('class', 'nodes')
+ this.g_nodes = this.container.append("g")
+ .attr('class', 'nodes');
+ this.node = this.g_nodes
.selectAll(".node");
@@ -405,6 +426,11 @@ class NodeMap {
// .force("posY", d3.forceY(n => n.targetY || 0).strength(n => n.targetY ? 1 : 0))
;
+ this.svg
+ .call(zoom)
+ .call(zoom.transform, d3.zoomIdentity.scale(.5, .5));
+
+
this.update();
setTimeout(() => this.calculateLabels(), 1000);