From 007a8bcece633ec618b3f649405e83e85a9ce0aa Mon Sep 17 00:00:00 2001 From: Marek Kaluba Date: Thu, 24 Feb 2022 02:34:58 +0100 Subject: [PATCH 1/4] use bezier instead of elliptic arrows --- docs/morphisms/js/d3_visualisation.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/docs/morphisms/js/d3_visualisation.js b/docs/morphisms/js/d3_visualisation.js index 4609b07..f1a1411 100644 --- a/docs/morphisms/js/d3_visualisation.js +++ b/docs/morphisms/js/d3_visualisation.js @@ -24,11 +24,23 @@ function drag(simulation) { } function linkArc(d) { - const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y); + let r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y); + r = 40*Math.exp(r/50) + // r = 50 + 2*(r/20)**3 +// Elliptical arc: +// return ` +// M${d.source.x},${d.source.y} +// A${r},${r} 0 0,1 ${d.target.x},${d.target.y} +// `; + let xmid = (d.source.x + d.target.x) / 2 + let ymid = (d.source.y + d.target.y) / 2 + // cubic smooth Bezier return ` - M${d.source.x},${d.source.y} - A${r},${r} 0 0,1 ${d.target.x},${d.target.y} - `; + M${d.source.x} ${d.source.y} + S${xmid - 0.01*ymid} ${ymid + 0.01*xmid} + ${d.target.x},${d.target.y} + ` + ; } function highlight(node) { From c42a98459a5e4ed92ceba6424fe9d8963ef5a773 Mon Sep 17 00:00:00 2001 From: Marek Kaluba Date: Thu, 24 Feb 2022 02:35:27 +0100 Subject: [PATCH 2/4] add vertical/radial force --- docs/morphisms/js/d3_visualisation.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/morphisms/js/d3_visualisation.js b/docs/morphisms/js/d3_visualisation.js index f1a1411..770b598 100644 --- a/docs/morphisms/js/d3_visualisation.js +++ b/docs/morphisms/js/d3_visualisation.js @@ -81,11 +81,14 @@ async function create_svg( .text(n=>n.id) const simulation = d3.forceSimulation(nodes) + // .alphaTarget(0.35) + // .alphaDecay(0.5) .force("link", d3.forceLink(links).id(d => d.id)) - .force("charge", d3.forceManyBody().strength(-400)) + .force("charge", d3.forceManyBody().strength(-500)) .force("center", d3.forceCenter(width/2, height/2)) .force("x", d3.forceX()) - .force("y", d3.forceY()); + .force("y", d3.forceY().y(d => 100 * (2 * d.level + 1))) + .force("radial", d3.forceRadial(d => 20 * (2*d.level), width/2, 0)) const svg = d3.create("svg") .attr("preserveAspectRatio", "xMinYMin meet") From e2278a29617e9601032005bf2a83c52a9df783dd Mon Sep 17 00:00:00 2001 From: Marek Kaluba Date: Thu, 24 Feb 2022 02:36:49 +0100 Subject: [PATCH 3/4] fix: make math foreignObject larger Chrome returns different height of BoundingRect than Firefox --- docs/morphisms/js/morphisms.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/morphisms/js/morphisms.js b/docs/morphisms/js/morphisms.js index 5756bcc..c1e28c7 100644 --- a/docs/morphisms/js/morphisms.js +++ b/docs/morphisms/js/morphisms.js @@ -48,11 +48,11 @@ async function add_search() { async function switch_katex(toggle=true) { let math_objects = document.getElementsByClassName("math"); for (let elt of math_objects) { - toggleKaTeX(elt, toggle); + await toggleKaTeX(elt, toggle); let fObj = elt.parentElement; let rect = elt.getElementsByClassName("math-tex")[0].getBoundingClientRect(); - fObj.setAttribute("width", rect.width+4); - fObj.setAttribute("height", rect.height+4); + fObj.setAttribute("width", rect.width+8); + fObj.setAttribute("height", rect.height+8); } }; From 445dafd0baeecce369cb85abfccb809b7e1190c4 Mon Sep 17 00:00:00 2001 From: Marek Kaluba Date: Thu, 24 Feb 2022 02:36:59 +0100 Subject: [PATCH 4/4] more cleanup --- docs/morphisms/js/d3_visualisation.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/docs/morphisms/js/d3_visualisation.js b/docs/morphisms/js/d3_visualisation.js index 770b598..8fcb3b5 100644 --- a/docs/morphisms/js/d3_visualisation.js +++ b/docs/morphisms/js/d3_visualisation.js @@ -1,7 +1,7 @@ function drag(simulation) { function dragstarted(event, d) { - if (!event.active) simulation.alphaTarget(0.3).restart(); + if (!event.active) simulation.alphaTarget(0.4).restart(); d.fx = d.x; d.fy = d.y; } @@ -59,10 +59,6 @@ function dehighlight(node) { ; } -function _union(...arr) { - return arr.reduce((first, second) => [...new Set(first.concat(second))]); -} - async function create_svg( data, width, @@ -89,6 +85,7 @@ async function create_svg( .force("x", d3.forceX()) .force("y", d3.forceY().y(d => 100 * (2 * d.level + 1))) .force("radial", d3.forceRadial(d => 20 * (2*d.level), width/2, 0)) + ; const svg = d3.create("svg") .attr("preserveAspectRatio", "xMinYMin meet") @@ -139,7 +136,6 @@ async function create_svg( ) ; return all_desc; - // return _union(desc, _union(...desc.map(l=>find_descendants(l.target)))); } };