From 7751fc05a8c3c44082bf97a6bbe77dfca34c8063 Mon Sep 17 00:00:00 2001 From: Ruben van de Ven Date: Wed, 28 Apr 2021 10:24:07 +0200 Subject: [PATCH] Dynamic font size for node titles --- www/graph.css | 4 ++-- www/graph.js | 46 ++++++++++++++++++++++++++++++++++++---------- 2 files changed, 38 insertions(+), 12 deletions(-) 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);