diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index 0dfbfad..500e3b2 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -1,12 +1,9 @@
-

Hello {name}!

-

Visit the Svelte tutorial to learn how to build Svelte apps.

+

Cool graf

diff --git a/frontend/src/Graph.svelte b/frontend/src/Graph.svelte index eb243f1..d02e5a9 100644 --- a/frontend/src/Graph.svelte +++ b/frontend/src/Graph.svelte @@ -2,15 +2,18 @@ import { onMount } from "svelte"; import * as d3 from "d3"; + // 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 = 400 - margin.left - margin.right, - height = 400 - margin.top - margin.bottom; + 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("#c") + .select(container) .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) @@ -52,6 +55,7 @@ ) .force("charge", d3.forceManyBody().strength(-400)) // This adds repulsion between nodes. Play with the -400 for the repulsion strength .force("center", d3.forceCenter(width / 2, height / 2)) // This force attracts nodes to the center of the svg area + .on("tick", ticked) .on("end", ticked); // This function is run at each iteration of the force algorithm, updating the nodes position. @@ -83,9 +87,9 @@ -
+