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

Prevent jump in hte beginning, and format code

Browse source
This commit is contained in:
Ruben van de Ven 2021-03-13 13:29:40 +01:00
parent d471ab197a
commit f348decd02
1 changed files with 76 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

143
graph.js
View file

@ -84,7 +84,7 @@ function splitText(text) {
}; };
function getTitle(obj) { function getTitle(obj) {
if(obj.parent) { if (obj.parent) {
return "sub of " + obj.parent.split('#', 1)[0].replace(/_/g, " ") return "sub of " + obj.parent.split('#', 1)[0].replace(/_/g, " ")
} }
return obj['@id'].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 .iterations(2) // increase to make more rigid
) )
.force("charge", d3.forceManyBody() .force("charge", d3.forceManyBody()
.strength(-50) .strength(-40)
) )
.force("center", d3.forceCenter(width / 2, height / 2)) .force("center", d3.forceCenter(width / 2, height / 2))
.force("collision", d3.forceCollide(function (d) { .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") const svg = d3.select("svg")
@ -151,7 +151,7 @@ function buildGraph(data) {
.append("line"). .append("line").
attr("marker-end", "url(#arrowHead)"); attr("marker-end", "url(#arrowHead)");
const linkText = link.append("text").text(function (l) { const linkText = link.append("text").text(function (l) {
return l.name; return l.name;
}); });
const node = container.append("g") const node = container.append("g")
@ -211,14 +211,14 @@ function buildGraph(data) {
data.nodes.forEach(function (d, idx) { data.nodes.forEach(function (d, idx) {
d.leftX = d.rightX = d.x; d.leftX = d.rightX = d.x;
// fix first node on center // fix first node on center
// if(idx === 0) { // if(idx === 0) {
// d.fx = width/2; // d.fx = width/2;
// d.fy = height/2; // d.fy = height/2;
// return; // return;
// } // }
}); });
link link
.attr("x1", d => d.source.x) .attr("x1", d => d.source.x)
@ -227,72 +227,72 @@ function buildGraph(data) {
.attr("y2", d => d.target.y); .attr("y2", d => d.target.y);
linkLine.each(function (d) { 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. // This mess makes the arrows exactly perfect.
// thanks to http://bl.ocks.org/curran/9b73eb564c1c8a3d8f3ab207de364bf4 // thanks to http://bl.ocks.org/curran/9b73eb564c1c8a3d8f3ab207de364bf4
if (d.source.x < d.target.x) { if (d.source.x < d.target.x) {
sourceX = d.source.x; sourceX = d.source.x;
targetX = d.target.x; targetX = d.target.x;
} else if (d.target.x < d.source.x) { } else if (d.target.x < d.source.x) {
targetX = d.target.x; targetX = d.target.x;
sourceX = d.source.x; sourceX = d.source.x;
} else if (d.target.isCircle) { } else if (d.target.isCircle) {
targetX = sourceX = d.target.x; targetX = sourceX = d.target.x;
} else if (d.source.isCircle) { } else if (d.source.isCircle) {
targetX = sourceX = d.source.x; targetX = sourceX = d.source.x;
} else { } else {
midX = (d.source.x + d.target.x) / 2; midX = (d.source.x + d.target.x) / 2;
if (midX > d.target.x) { if (midX > d.target.x) {
midX = d.target.x; midX = d.target.x;
} else if (midX > d.source.x) { } else if (midX > d.source.x) {
midX = d.source.x; midX = d.source.x;
} else if (midX < d.target.x) { } else if (midX < d.target.x) {
midX = d.target.x; midX = d.target.x;
} else if (midX < d.source.x) { } else if (midX < d.source.x) {
midX = d.source.x; midX = d.source.x;
}
targetX = sourceX = midX;
} }
targetX = sourceX = midX;
}
dx = targetX - sourceX; dx = targetX - sourceX;
dy = d.target.y - d.source.y; dy = d.target.y - d.source.y;
angle = Math.atan2(dx, dy); angle = Math.atan2(dx, dy);
/* DISABLED /* DISABLED
srcSize = (typeof nodePositions[d.source.index] != 'undefined') ? selectedNodeSize : nodeSize; srcSize = (typeof nodePositions[d.source.index] != 'undefined') ? selectedNodeSize : nodeSize;
tgtSize = (typeof nodePositions[d.target.index] != 'undefined') ? selectedNodeSize : nodeSize; tgtSize = (typeof nodePositions[d.target.index] != 'undefined') ? selectedNodeSize : nodeSize;
*/ */
var srcSize = getSizeForNode(d.source); var srcSize = getSizeForNode(d.source);
var tgtSize = getSizeForNode(d.target); var tgtSize = getSizeForNode(d.target);
// Compute the line endpoint such that the arrow // Compute the line endpoint such that the arrow
// is touching the edge of the node rectangle perfectly. // is touching the edge of the node rectangle perfectly.
d.sourceX = sourceX + Math.sin(angle) * srcSize; d.sourceX = sourceX + Math.sin(angle) * srcSize;
d.targetX = targetX - Math.sin(angle) * tgtSize; d.targetX = targetX - Math.sin(angle) * tgtSize;
d.sourceY = d.source.y + Math.cos(angle) * srcSize; d.sourceY = d.source.y + Math.cos(angle) * srcSize;
d.targetY = d.target.y - Math.cos(angle) * tgtSize; d.targetY = d.target.y - Math.cos(angle) * tgtSize;
}).attr("x1", function (d) { }).attr("x1", function (d) {
return d.sourceX; return d.sourceX;
}).attr("y1", function (d) { }).attr("y1", function (d) {
return d.sourceY; return d.sourceY;
}).attr("x2", function (d) { }).attr("x2", function (d) {
return d.targetX; return d.targetX;
}).attr("y2", function (d) { }).attr("y2", function (d) {
return d.targetY; return d.targetY;
}); });
linkText.attr("transform", function (d) { linkText.attr("transform", function (d) {
const dx = (d.target.x - d.source.x) / 2; const dx = (d.target.x - d.source.x) / 2;
const dy = (d.target.y - d.source.y) / 2; const dy = (d.target.y - d.source.y) / 2;
const x = d.source.x + dx; const x = d.source.x + dx;
const y = d.source.y + dy; const y = d.source.y + dy;
const deg = Math.atan(dy / dx) * 180 / Math.PI; const deg = Math.atan(dy / dx) * 180 / Math.PI;
// if dx/dy == 0/0 -> deg == NaN // if dx/dy == 0/0 -> deg == NaN
if (isNaN(deg)) { if (isNaN(deg)) {
return ""; return "";
} }
// return ""; // return "";
return "translate(" + x + " " + y + ") rotate(" + (CONFIG.labels.rotate ? deg : 0) + ")"; return "translate(" + x + " " + y + ") rotate(" + (CONFIG.labels.rotate ? deg : 0) + ")";
}); });
node 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(); return svg.node();
} }
@ -333,7 +340,7 @@ const drag = simulation => {
.on("end", dragended); .on("end", dragended);
}; };
function selectNode(evt, node, d3Node){ function selectNode(evt, node, d3Node) {
console.log(evt, node, d3Node); console.log(evt, node, d3Node);
document.querySelectorAll('svg .node').forEach(n => n.classList.remove('selected')); document.querySelectorAll('svg .node').forEach(n => n.classList.remove('selected'));
d3Node._groups[0][node.index].classList.add('selected'); d3Node._groups[0][node.index].classList.add('selected');
@ -344,7 +351,7 @@ function selectNode(evt, node, d3Node){
const url = getUrl(node); const url = getUrl(node);
const hrefEl = infoEl.querySelector('.nodeHref'); const hrefEl = infoEl.querySelector('.nodeHref');
hrefEl.textContent = getTitle(node); hrefEl.textContent = getTitle(node);
hrefEl.setAttribute('href',url); hrefEl.setAttribute('href', url);
infoEl.querySelector('.nodeContents').src = url; infoEl.querySelector('.nodeContents').src = url;
} }