|
|
@ -47,27 +47,27 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
|
|
|
|
|
|
|
|
|
|
|
|
const drag = simulation => {
|
|
|
|
const drag = simulation => {
|
|
|
|
function dragstarted(event, d) {
|
|
|
|
function dragstarted(event, d) {
|
|
|
|
if (!event.active) simulation.alphaTarget(1).restart();
|
|
|
|
if (!event.active) simulation.alphaTarget(1).restart()
|
|
|
|
d.fx = d.x;
|
|
|
|
d.fx = d.x
|
|
|
|
d.fy = d.y;
|
|
|
|
d.fy = d.y
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function dragged(event, d) {
|
|
|
|
function dragged(event, d) {
|
|
|
|
d.fx = event.x;
|
|
|
|
d.fx = event.x
|
|
|
|
d.fy = event.y;
|
|
|
|
d.fy = event.y
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function dragended(event, d) {
|
|
|
|
function dragended(event, d) {
|
|
|
|
if (!event.active) simulation.alphaTarget(0);
|
|
|
|
if (!event.active) simulation.alphaTarget(0)
|
|
|
|
d.fx = null;
|
|
|
|
d.fx = null
|
|
|
|
d.fy = null;
|
|
|
|
d.fy = null
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const noop = () => { }
|
|
|
|
const noop = () => { }
|
|
|
|
return d3.drag()
|
|
|
|
return d3.drag()
|
|
|
|
.on("start", enableDrag ? dragstarted : noop)
|
|
|
|
.on("start", enableDrag ? dragstarted : noop)
|
|
|
|
.on("drag", enableDrag ? dragged : noop)
|
|
|
|
.on("drag", enableDrag ? dragged : noop)
|
|
|
|
.on("end", enableDrag ? dragended : noop);
|
|
|
|
.on("end", enableDrag ? dragended : noop)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const height = Math.max(document.getElementById("graph-container").offsetHeight, 250)
|
|
|
|
const height = Math.max(document.getElementById("graph-container").offsetHeight, 250)
|
|
|
@ -76,13 +76,13 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
|
|
|
|
const simulation = d3.forceSimulation(data.nodes)
|
|
|
|
const simulation = d3.forceSimulation(data.nodes)
|
|
|
|
.force("charge", d3.forceManyBody().strength(-30))
|
|
|
|
.force("charge", d3.forceManyBody().strength(-30))
|
|
|
|
.force("link", d3.forceLink(data.links).id(d => d.id).distance(40))
|
|
|
|
.force("link", d3.forceLink(data.links).id(d => d.id).distance(40))
|
|
|
|
.force("center", d3.forceCenter());
|
|
|
|
.force("center", d3.forceCenter())
|
|
|
|
|
|
|
|
|
|
|
|
const svg = d3.select('#graph-container')
|
|
|
|
const svg = d3.select('#graph-container')
|
|
|
|
.append('svg')
|
|
|
|
.append('svg')
|
|
|
|
.attr('width', width)
|
|
|
|
.attr('width', width)
|
|
|
|
.attr('height', height)
|
|
|
|
.attr('height', height)
|
|
|
|
.attr("viewBox", [-width / 2, -height / 2, width, height]);
|
|
|
|
.attr("viewBox", [-width / 2, -height / 2, width, height])
|
|
|
|
|
|
|
|
|
|
|
|
if (enableLegend) {
|
|
|
|
if (enableLegend) {
|
|
|
|
const legend = [
|
|
|
|
const legend = [
|
|
|
@ -183,7 +183,7 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
|
|
|
|
.duration(200)
|
|
|
|
.duration(200)
|
|
|
|
.style("opacity", 0)
|
|
|
|
.style("opacity", 0)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.call(drag(simulation));
|
|
|
|
.call(drag(simulation))
|
|
|
|
|
|
|
|
|
|
|
|
// draw labels
|
|
|
|
// draw labels
|
|
|
|
const labels = graphNode.append("text")
|
|
|
|
const labels = graphNode.append("text")
|
|
|
@ -195,7 +195,7 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
|
|
|
|
.style("pointer-events", "none")
|
|
|
|
.style("pointer-events", "none")
|
|
|
|
.style("font-size", "0.4em")
|
|
|
|
.style("font-size", "0.4em")
|
|
|
|
.raise()
|
|
|
|
.raise()
|
|
|
|
.call(drag(simulation));
|
|
|
|
.call(drag(simulation))
|
|
|
|
|
|
|
|
|
|
|
|
// set panning
|
|
|
|
// set panning
|
|
|
|
|
|
|
|
|
|
|
@ -204,14 +204,14 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
|
|
|
|
.extent([[0, 0], [width, height]])
|
|
|
|
.extent([[0, 0], [width, height]])
|
|
|
|
.scaleExtent([0.25, 4])
|
|
|
|
.scaleExtent([0.25, 4])
|
|
|
|
.on("zoom", ({ transform }) => {
|
|
|
|
.on("zoom", ({ transform }) => {
|
|
|
|
link.attr("transform", transform);
|
|
|
|
link.attr("transform", transform)
|
|
|
|
node.attr("transform", transform);
|
|
|
|
node.attr("transform", transform)
|
|
|
|
const scale = transform.k
|
|
|
|
const scale = transform.k
|
|
|
|
const scaledOpacity = Math.max((scale - 1) / 3.75, 0)
|
|
|
|
const scaledOpacity = Math.max((scale - 1) / 3.75, 0)
|
|
|
|
labels
|
|
|
|
labels
|
|
|
|
.attr("transform", transform)
|
|
|
|
.attr("transform", transform)
|
|
|
|
.style("opacity", scaledOpacity)
|
|
|
|
.style("opacity", scaledOpacity)
|
|
|
|
}));
|
|
|
|
}))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// progress the simulation
|
|
|
|
// progress the simulation
|
|
|
@ -227,5 +227,5 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
|
|
|
|
labels
|
|
|
|
labels
|
|
|
|
.attr("x", d => d.x)
|
|
|
|
.attr("x", d => d.x)
|
|
|
|
.attr("y", d => d.y)
|
|
|
|
.attr("y", d => d.y)
|
|
|
|
});
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|