Přesunuto na GitHub https://github.com/ksp/kurz
https://ksp.mff.cuni.cz/kurz
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
2.8 KiB
98 lines
2.8 KiB
<script type="ts">
|
|
import { onMount } from "svelte";
|
|
import * as d3 from "d3";
|
|
import * as tasksLoader from "./task-loader";
|
|
|
|
// Svelte automatically fills this with a reference
|
|
let container: HTMLElement;
|
|
|
|
onMount(async () => {
|
|
// set the dimensions and margins of the graph
|
|
var margin = { top: 10, right: 30, bottom: 30, left: 40 },
|
|
width = container.clientWidth - margin.left - margin.right,
|
|
height = container.clientHeight - margin.top - margin.bottom;
|
|
|
|
// append the svg object to the body of the page
|
|
var svg = d3
|
|
.select(container)
|
|
.append("svg")
|
|
.attr("width", width + margin.left + margin.right)
|
|
.attr("height", height + margin.top + margin.bottom)
|
|
.attr("viewBox", [-width / 2, -height / 2, width, height])
|
|
.append("g")
|
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
|
|
|
const tasks = await tasksLoader.loadTasks();
|
|
let nodes = tasks.tasks;
|
|
let edges = tasksLoader.createLinksFromTaskMap(tasks);
|
|
|
|
// Initialize the links
|
|
var link = svg
|
|
.selectAll("line")
|
|
.data(edges)
|
|
.enter()
|
|
.append("line")
|
|
.style("stroke", "#aaa");
|
|
|
|
// Initialize the nodes
|
|
var node = svg
|
|
.selectAll("circle")
|
|
.data(nodes)
|
|
.enter()
|
|
.append("circle")
|
|
.attr("r", 20)
|
|
.style("fill", "#69b3a2");
|
|
|
|
// Let's list the force we wanna apply on the network
|
|
var simulation = d3
|
|
.forceSimulation(nodes) // Force algorithm is applied to data.nodes
|
|
.force(
|
|
"link",
|
|
d3
|
|
.forceLink() // This force provides links between nodes
|
|
.id(function (d) {
|
|
return d.id;
|
|
}) // This provide the id of a node
|
|
.links(edges) // and this the list of links
|
|
)
|
|
.force("charge", d3.forceManyBody().strength(-400)) // This adds repulsion between nodes. Play with the -400 for the repulsion strength
|
|
.force('x', d3.forceX()) // attracts elements to the zero X coord
|
|
.force('y', d3.forceY()) // attracts elements to the zero Y coord
|
|
.on("tick", ticked)
|
|
.on("end", ticked);
|
|
|
|
// This function is run at each iteration of the force algorithm, updating the nodes position.
|
|
function ticked() {
|
|
link
|
|
.attr("x1", function (d) {
|
|
return d.source.x;
|
|
})
|
|
.attr("y1", function (d) {
|
|
return d.source.y;
|
|
})
|
|
.attr("x2", function (d) {
|
|
return d.target.x;
|
|
})
|
|
.attr("y2", function (d) {
|
|
return d.target.y;
|
|
});
|
|
|
|
node
|
|
.attr("cx", function (d) {
|
|
return d.x + 6;
|
|
})
|
|
.attr("cy", function (d) {
|
|
return d.y - 6;
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
div {
|
|
height: 75vh;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<div bind:this={container} />
|
|
|