Select Git revision
visualization.js
-
Marc Feger authoredMarc Feger authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
visualization.js 6.56 KiB
import * as d3 from 'd3'
import {Neo4JAdapter} from '../neo4j/neo'
import {Graph} from '../graph/graph'
import {GraphCreator} from '../graph/graphCreator'
import {v1 as neo4j} from 'neo4j-driver'
import {elements} from '../discussionElements'
import {getIssueTooltipOf, getStatementTooltipOf, getArgumentTooltipOf, getEdgeTooltipOf} from './tooltip/tooltip'
export class Network {
async showNetwork(query) {
const graph = await new GraphCreator().fill(new Graph(), query);
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("opacity", 0);
const svg = d3.select('svg'),
width = +svg.attr('width'),
height = +svg.attr('height');
const simulation = d3.forceSimulation()
.nodes(graph.nodes)
.force('link', d3.forceLink().id(d => d.id).distance(100))
.force('charge', d3.forceManyBody())
.force('center', d3.forceCenter(width / 2, height / 2))
.velocityDecay(0.3)
.alphaTarget(1)
.on('tick', ticked);
simulation.force('link')
.links(graph.edges);
const R = 10;
let link = svg.selectAll('line')
.data(graph.edges)
.enter().append('line');
link
.attr('class', 'link')
.attr('stroke', function (l) {
if (l.type.includes(elements.REGARDING)) {
return "#A9A9A9";
} else if (l.type.includes(elements.CONCLUDES)) {
return "#ce34ff";
} else if (l.type.includes(elements.PREMISEOF)) {
return "#7b6fcc";
}
})
.on('mouseover.tooltip', function (d) {
tooltip.transition()
.duration(300)
.style("opacity", 0.8);
tooltip.html(getEdgeTooltipOf(d))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY + 10) + "px");
})
.on("mouseout.tooltip", function () {
tooltip.transition()
.duration(100)
.style("opacity", 0);
})
.on('mouseout.fade', fade(1))
.on("mousemove", function () {
tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY + 10) + "px");
});
;
let node = svg.selectAll('.node')
.data(graph.nodes)