Dynamic font size for node titles
This commit is contained in:
parent
2dda26ff77
commit
7751fc05a8
2 changed files with 38 additions and 12 deletions
|
@ -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 {
|
||||
|
|
46
www/graph.js
46
www/graph.js
|
@ -226,7 +226,24 @@ class NodeMap {
|
|||
|
||||
render() {
|
||||
this.svg = this.root.append('svg')
|
||||
this.svg.append('defs').html('<marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHead" fill="#f3722c"><path d="M0,-3L8,0L0,3"></path></marker><marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHeadSelected"><path d="M0,-3L8,0L0,3" fill="white"></path></marker>');
|
||||
this.svg.append('defs').html(`<marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHead" fill="#f3722c"><path d="M0,-3L8,0L0,3"></path></marker><marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHeadSelected"><path d="M0,-3L8,0L0,3" fill="white"></path></marker>
|
||||
<!--Sketching:-->
|
||||
<defs>
|
||||
<filter id="tint">
|
||||
<feColorMatrix values="1.1 0 0 0 0 0 1.1 0 0 0 0 0 0.9 0 0 0 0 0 1 0" />
|
||||
</filter>
|
||||
<filter id="splotch">
|
||||
<feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="4" />
|
||||
<feColorMatrix values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -0.9 1.2" result="texture" />
|
||||
<feComposite in="SourceGraphic" in2="texture" operator="in" />
|
||||
<feGaussianBlur stdDeviation="3.5" />
|
||||
</filter>
|
||||
<filter id="pencil">
|
||||
<feTurbulence baseFrequency="0.03" numOctaves="6" type="fractalNoise" />
|
||||
<feDisplacementMap scale="4" in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" />
|
||||
<feGaussianBlur stdDeviation="0.5" />
|
||||
</filter>
|
||||
</defs>`);
|
||||
|
||||
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);
|
||||
|
|
Loading…
Reference in a new issue