From f348decd02bb838a429769d5ff52136572bf52d7 Mon Sep 17 00:00:00 2001 From: Ruben van de Ven Date: Sat, 13 Mar 2021 13:29:40 +0100 Subject: [PATCH] Prevent jump in hte beginning, and format code --- graph.js | 145 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 76 insertions(+), 69 deletions(-) diff --git a/graph.js b/graph.js index c119a8a..4eb0479 100644 --- a/graph.js +++ b/graph.js @@ -84,7 +84,7 @@ function splitText(text) { }; function getTitle(obj) { - if(obj.parent) { + if (obj.parent) { return "sub of " + obj.parent.split('#', 1)[0].replace(/_/g, " ") } return obj['@id'].split('#', 1)[0].replace(/_/g, " ") @@ -129,11 +129,11 @@ function buildGraph(data) { .iterations(2) // increase to make more rigid ) .force("charge", d3.forceManyBody() - .strength(-50) + .strength(-40) ) .force("center", d3.forceCenter(width / 2, height / 2)) .force("collision", d3.forceCollide(function (d) { - return getSizeForNode(d) * 1.5; // avoid overlapping nodes + return getSizeForNode(d) * 1.5; // avoid overlapping nodes })); const svg = d3.select("svg") @@ -151,7 +151,7 @@ function buildGraph(data) { .append("line"). attr("marker-end", "url(#arrowHead)"); const linkText = link.append("text").text(function (l) { - return l.name; + return l.name; }); const node = container.append("g") @@ -211,14 +211,14 @@ function buildGraph(data) { data.nodes.forEach(function (d, idx) { - d.leftX = d.rightX = d.x; + d.leftX = d.rightX = d.x; - // fix first node on center - // if(idx === 0) { - // d.fx = width/2; - // d.fy = height/2; - // return; - // } + // fix first node on center + // if(idx === 0) { + // d.fx = width/2; + // d.fy = height/2; + // return; + // } }); link .attr("x1", d => d.source.x) @@ -227,72 +227,72 @@ function buildGraph(data) { .attr("y2", d => d.target.y); linkLine.each(function (d) { - var sourceX, targetX, midX, dx, dy, angle; + var sourceX, targetX, midX, dx, dy, angle; - // This mess makes the arrows exactly perfect. - // thanks to http://bl.ocks.org/curran/9b73eb564c1c8a3d8f3ab207de364bf4 - if (d.source.x < d.target.x) { - sourceX = d.source.x; - targetX = d.target.x; - } else if (d.target.x < d.source.x) { - targetX = d.target.x; - sourceX = d.source.x; - } else if (d.target.isCircle) { - targetX = sourceX = d.target.x; - } else if (d.source.isCircle) { - targetX = sourceX = d.source.x; - } else { - midX = (d.source.x + d.target.x) / 2; - if (midX > d.target.x) { - midX = d.target.x; - } else if (midX > d.source.x) { - midX = d.source.x; - } else if (midX < d.target.x) { - midX = d.target.x; - } else if (midX < d.source.x) { - midX = d.source.x; + // This mess makes the arrows exactly perfect. + // thanks to http://bl.ocks.org/curran/9b73eb564c1c8a3d8f3ab207de364bf4 + if (d.source.x < d.target.x) { + sourceX = d.source.x; + targetX = d.target.x; + } else if (d.target.x < d.source.x) { + targetX = d.target.x; + sourceX = d.source.x; + } else if (d.target.isCircle) { + targetX = sourceX = d.target.x; + } else if (d.source.isCircle) { + targetX = sourceX = d.source.x; + } else { + midX = (d.source.x + d.target.x) / 2; + if (midX > d.target.x) { + midX = d.target.x; + } else if (midX > d.source.x) { + midX = d.source.x; + } else if (midX < d.target.x) { + midX = d.target.x; + } else if (midX < d.source.x) { + midX = d.source.x; + } + targetX = sourceX = midX; } - targetX = sourceX = midX; - } - dx = targetX - sourceX; - dy = d.target.y - d.source.y; - angle = Math.atan2(dx, dy); + dx = targetX - sourceX; + dy = d.target.y - d.source.y; + angle = Math.atan2(dx, dy); - /* DISABLED - srcSize = (typeof nodePositions[d.source.index] != 'undefined') ? selectedNodeSize : nodeSize; - tgtSize = (typeof nodePositions[d.target.index] != 'undefined') ? selectedNodeSize : nodeSize; - */ - var srcSize = getSizeForNode(d.source); - var tgtSize = getSizeForNode(d.target); + /* DISABLED + srcSize = (typeof nodePositions[d.source.index] != 'undefined') ? selectedNodeSize : nodeSize; + tgtSize = (typeof nodePositions[d.target.index] != 'undefined') ? selectedNodeSize : nodeSize; + */ + var srcSize = getSizeForNode(d.source); + var tgtSize = getSizeForNode(d.target); - // Compute the line endpoint such that the arrow - // is touching the edge of the node rectangle perfectly. - d.sourceX = sourceX + Math.sin(angle) * srcSize; - d.targetX = targetX - Math.sin(angle) * tgtSize; - d.sourceY = d.source.y + Math.cos(angle) * srcSize; - d.targetY = d.target.y - Math.cos(angle) * tgtSize; + // Compute the line endpoint such that the arrow + // is touching the edge of the node rectangle perfectly. + d.sourceX = sourceX + Math.sin(angle) * srcSize; + d.targetX = targetX - Math.sin(angle) * tgtSize; + d.sourceY = d.source.y + Math.cos(angle) * srcSize; + d.targetY = d.target.y - Math.cos(angle) * tgtSize; }).attr("x1", function (d) { - return d.sourceX; + return d.sourceX; }).attr("y1", function (d) { - return d.sourceY; + return d.sourceY; }).attr("x2", function (d) { - return d.targetX; + return d.targetX; }).attr("y2", function (d) { - return d.targetY; + return d.targetY; }); linkText.attr("transform", function (d) { - const dx = (d.target.x - d.source.x) / 2; - const dy = (d.target.y - d.source.y) / 2; - const x = d.source.x + dx; - const y = d.source.y + dy; - const deg = Math.atan(dy / dx) * 180 / Math.PI; - // if dx/dy == 0/0 -> deg == NaN - if (isNaN(deg)) { - return ""; - } - // return ""; - return "translate(" + x + " " + y + ") rotate(" + (CONFIG.labels.rotate ? deg : 0) + ")"; + const dx = (d.target.x - d.source.x) / 2; + const dy = (d.target.y - d.source.y) / 2; + const x = d.source.x + dx; + const y = d.source.y + dy; + const deg = Math.atan(dy / dx) * 180 / Math.PI; + // if dx/dy == 0/0 -> deg == NaN + if (isNaN(deg)) { + return ""; + } + // return ""; + return "translate(" + x + " " + y + ") rotate(" + (CONFIG.labels.rotate ? deg : 0) + ")"; }); node @@ -300,6 +300,13 @@ function buildGraph(data) { }); + + // simulate the first bit without drawing, so we don't have the 'jumping' graph in the beginning + for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) { + simulation.tick(); + } + + return svg.node(); } @@ -333,7 +340,7 @@ const drag = simulation => { .on("end", dragended); }; -function selectNode(evt, node, d3Node){ +function selectNode(evt, node, d3Node) { console.log(evt, node, d3Node); document.querySelectorAll('svg .node').forEach(n => n.classList.remove('selected')); d3Node._groups[0][node.index].classList.add('selected'); @@ -344,9 +351,9 @@ function selectNode(evt, node, d3Node){ const url = getUrl(node); const hrefEl = infoEl.querySelector('.nodeHref'); hrefEl.textContent = getTitle(node); - hrefEl.setAttribute('href',url); + hrefEl.setAttribute('href', url); infoEl.querySelector('.nodeContents').src = url; - + } document.getElementById('closeInfo').addEventListener('click', (evt) => {