const CONFIG = { 'nodeSize': 16, 'baseUrl': 'https://www.securityvision.io/wiki/index.php/', 'dataUrl': 'semantic_data.json', 'labels': { 'rotate': true, }, }; function getSizeForNode(node) { // if (node.hasOwnProperty('https://schema.org/thumbnailUrl')) return nodeSize; // if (weights[node['@id']]) return nodeSize * weights[node['@id']]; // if (node['@id'] == firstNodeId) return nodeSize * 1.2; // // everynode has at least one link. these should equal 1 // return nodeSize * (.7 + Math.min(20, linkMap[node['@id']].length) / 40); if (node.parent) { return 2; } return CONFIG.nodeSize; } function splitText(text) { var characters = [" ", "-", "_", '\xAD']; var charSplitPos = {}; var mid = Math.floor(text.length / 2); var splitPos = false; var splitPosChar = false; // split sentences var _iteratorNormalCompletion6 = true; var _didIteratorError6 = false; var _iteratorError6 = undefined; try { for (var _iterator6 = characters[Symbol.iterator](), _step6; !(_iteratorNormalCompletion6 = (_step6 = _iterator6.next()).done); _iteratorNormalCompletion6 = true) { var char = _step6.value; if (text.indexOf(char) < 0) { continue; } var tmid = text.substr(0, mid).lastIndexOf(char); if (tmid === -1) { tmid = text.indexOf(char); } tmid += 1; // we want to cut _after_ the character // console.log("Char", char, tmid); if (splitPos === false || Math.abs(tmid - mid) < Math.abs(splitPos - mid)) { // console.log("least!"); splitPos = tmid; splitPosChar = char; } } // console.log("pos",splitPos) } catch (err) { _didIteratorError6 = true; _iteratorError6 = err; } finally { try { if (!_iteratorNormalCompletion6 && _iterator6.return) { _iterator6.return(); } } finally { if (_didIteratorError6) { throw _iteratorError6; } } } if (splitPos === false) { return false; } var text1 = text.substr(0, splitPos).trim(); var text2 = text.substr(splitPos).trim(); if (splitPosChar == '\xAD') { text1 += "-"; } // find most equal split return [text1, text2]; }; function getTitle(obj) { if(obj.parent) { return "sub of " + obj.parent.split('#', 1)[0].replace(/_/g, " ") } return obj['@id'].split('#', 1)[0].replace(/_/g, " ") } function getClasses(obj) { if (!obj._INST) return 'node'; const classes = obj['_INST'].map(classId => classId.split('#', 1)[0]); return 'node ' + classes.join(' '); } function getUrl(obj) { return CONFIG.baseUrl + obj['@id'].split('#', 1)[0]; } let width = window.innerWidth; let height = window.innerHeight; const request = new Request(CONFIG.dataUrl, { method: 'GET' }); fetch(request) .then(response => { if (response.status === 200) { return response.json(); } else { throw new Error('Something went wrong on api server!'); } }) .then(data => { buildGraph(data); }).catch(error => { console.error(error); }); function buildGraph(data) { console.log(data); const nodes = data.nodes.filter(n => n._INST || n.parent).map(d => Object.create(d)); const nodeMap = Object.fromEntries(nodes.map(d => [d['@id'], d])); const links = data.links.filter(l => nodeMap[l.source] && nodeMap[l.target]).map(d => Object.create(d)); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links) .id(d => d['@id']) .iterations(2) // increase to make more rigid ) .force("charge", d3.forceManyBody() .strength(-50) ) .force("center", d3.forceCenter(width / 2, height / 2)) .force("collision", d3.forceCollide(function (d) { return getSizeForNode(d) * 1.5; // avoid overlapping nodes })); const svg = d3.select("svg") .attr("viewBox", [0, 0, width, height]); const container = svg.append("g").attr("id", "container"); const link = container.append("g") .attr('class', 'links') .selectAll(".link") .data(links) .join("g") .attr("class", "link") const linkLine = link .append("line"). attr("marker-end", "url(#arrowHead)"); const linkText = link.append("text").text(function (l) { return l.name; }); const node = container.append("g") .attr('class', 'nodes') .selectAll(".node") .data(nodes) .join("g") .attr('class', getClasses) .call(drag(simulation)) .on("click", (evt, n) => selectNode(evt, n, node)) ; node .append('circle') .attr("r", getSizeForNode) // .call(drag(simulation)); var nodeTitle = node.append('text').attr("class", "nodeTitle").attr("y", "5"); nodeTitle .each(function (node, nodes) { var textLength = void 0; const self = d3.select(this); const titleText = getTitle(node); var titleTexts = false; if (titleText.length > 20) { titleTexts = splitText(titleText); } if (titleTexts !== false) { const tspan1 = self.append("tspan").text(titleTexts[0]).attr("y", "-10").attr("x", "0"); const tspan = self.append("tspan").text(titleTexts[1]).attr("y", "10").attr("x", "0"); const textLength1 = tspan.node().getComputedTextLength(); const textLength2 = tspan.node().getComputedTextLength(); textLength = Math.max(textLength1, textLength2); } else { self.text(titleText); textLength = self.node().getComputedTextLength(); } // scale according to text length: if (textLength > getSizeForNode(node) * 2) { self.attr('transform', 'scale(' + getSizeForNode(node) * 2 / textLength / 1.05 + ')'); } }); // node.append("title") // .text(d => d['@id']); svg.call(d3.zoom().scaleExtent([0.3, 6]).on("start", function () { svg.node().classList.add("dragging"); }).on("end", function () { svg.node().classList.remove("dragging"); }).on("zoom", function ({ transform }) { container.attr("transform", transform); })); simulation.on("tick", () => { data.nodes.forEach(function (d, idx) { d.leftX = d.rightX = d.x; // fix first node on center // if(idx === 0) { // d.fx = width/2; // d.fy = height/2; // return; // } }); link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); linkLine.each(function (d) { 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; } targetX = sourceX = midX; } 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); // 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; }).attr("y1", function (d) { return d.sourceY; }).attr("x2", function (d) { return d.targetX; }).attr("y2", function (d) { 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) + ")"; }); node .attr("transform", d => `translate(${d.x}, ${d.y})`); }); return svg.node(); } color = _ => { const scale = d3.scaleOrdinal(d3.schemeCategory10); return d => scale(d.group); }; const drag = simulation => { function dragstarted(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function dragended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }; 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'); infoEl = document.getElementById('nodeInfo'); infoEl.classList.remove('hidden'); const url = getUrl(node); const hrefEl = infoEl.querySelector('.nodeHref'); hrefEl.textContent = getTitle(node); hrefEl.setAttribute('href',url); infoEl.querySelector('.nodeContents').src = url; } document.getElementById('closeInfo').addEventListener('click', (evt) => { document.querySelectorAll('svg .node').forEach(n => n.classList.remove('selected')); document.getElementById('nodeInfo').classList.add('hidden'); })