security_vision/semantic_graph
1
0
Fork 1
Code Issues Pull requests Projects Releases 1 Wiki Activity

Dynamic font size for node titles

Browse source
This commit is contained in:
Ruben van de Ven 2021-04-28 10:24:07 +02:00
parent 2dda26ff77
commit 7751fc05a8
2 changed files with 38 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
www/graph.css
View file

@ -117,7 +117,7 @@ svg #header text#subtitle {
text-anchor: start; text-anchor: start;
dominant-baseline: hanging; dominant-baseline: hanging;
/*achieves a 'text-anchor: top'*/ /*achieves a 'text-anchor: top'*/
font-size: 16pt; /* font-size: 16pt; */ /*Set this in JS*/
transition: font-size .4s, opacity 1s; transition: font-size .4s, opacity 1s;
fill: white; fill: white;
opacity: 1; opacity: 1;
@ -130,7 +130,7 @@ svg #header text#subtitle {
} }
svg.zoomed .node text.nodeTitle { svg.zoomed .node text.nodeTitle {
font-size: 6pt; /* font-size: 6pt; */
} }
svg.zoomed.zoomed2 .node text.nodeTitle { svg.zoomed.zoomed2 .node text.nodeTitle {

46
www/graph.js
View file

@ -226,7 +226,24 @@ class NodeMap {
render() { render() {
this.svg = this.root.append('svg') 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(); this.resize();
@ -276,6 +293,7 @@ class NodeMap {
.attr("class", "borders") .attr("class", "borders")
.attr("d", this.proj(this.borders)) .attr("d", this.proj(this.borders))
let zoomTimeout = null;
const zoom = d3.zoom().scaleExtent([0.2, 10]).on("start", () => { const zoom = d3.zoom().scaleExtent([0.2, 10]).on("start", () => {
this.svg.node().classList.add("dragging"); this.svg.node().classList.add("dragging");
}).on("end", () => { }).on("end", () => {
@ -284,18 +302,20 @@ class NodeMap {
this.container.attr("transform", transform); this.container.attr("transform", transform);
const oldZoom = this.svg.classed('zoomed'); const oldZoom = this.svg.classed('zoomed');
const newZoom = transform.k > 2.0; const newZoom = transform.k > 2.0;
if (oldZoom != newZoom) { if(zoomTimeout) {
this.svg.classed('zoomed', newZoom); clearTimeout(zoomTimeout)
}
zoomTimeout = setTimeout(() => {
this.g_nodes.attr('style', `font-size:${22000 / this.height / transform.k}pt`)
setTimeout(() => { setTimeout(() => {
this.calculateLabels(); this.calculateLabels();
}, 500); }, 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'); this.title = this.container.append('g').attr('id', 'header');
const titleFeature = { const titleFeature = {
@ -342,8 +362,9 @@ class NodeMap {
this.link = this.container.append("g") this.link = this.container.append("g")
.attr('class', 'links') .attr('class', 'links')
.selectAll(".link"); .selectAll(".link");
this.node = this.container.append("g") this.g_nodes = this.container.append("g")
.attr('class', 'nodes') .attr('class', 'nodes');
this.node = this.g_nodes
.selectAll(".node"); .selectAll(".node");
@ -405,6 +426,11 @@ class NodeMap {
// .force("posY", d3.forceY(n => n.targetY || 0).strength(n => n.targetY ? 1 : 0)) // .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(); this.update();
setTimeout(() => this.calculateLabels(), 1000); setTimeout(() => this.calculateLabels(), 1000);