KSP/graf-uloh
Archived
45
1
Fork 0
Code Issues 20 Pull requests Releases Wiki Activity

vizualni upravy

Browse source
This commit is contained in:
Vašek Šraier 2020-09-26 21:26:12 +02:00
parent 096f725a20
commit 8b3f9308cd
2 changed files with 11 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/App.svelte
View file

@ -1,12 +1,9 @@
<script lang="ts"> <script lang="ts">
export let name: string;
import Graph from "./Graph.svelte"; import Graph from "./Graph.svelte";
</script> </script>
<main> <main>
<h1>Hello {name}!</h1> <h1>Cool graf</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
<Graph /> <Graph />
</main> </main>

16
frontend/src/Graph.svelte
View file

@ -2,15 +2,18 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import * as d3 from "d3"; import * as d3 from "d3";
// Svelte automatically fills this with a reference
let container: HTMLElement;
onMount(async () => { onMount(async () => {
// set the dimensions and margins of the graph // set the dimensions and margins of the graph
var margin = { top: 10, right: 30, bottom: 30, left: 40 }, var margin = { top: 10, right: 30, bottom: 30, left: 40 },
width = 400 - margin.left - margin.right, width = container.clientWidth - margin.left - margin.right,
height = 400 - margin.top - margin.bottom; height = container.clientHeight - margin.top - margin.bottom;
// append the svg object to the body of the page // append the svg object to the body of the page
var svg = d3 var svg = d3
.select("#c") .select(container)
.append("svg") .append("svg")
.attr("width", width + margin.left + margin.right) .attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom) .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("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 .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); .on("end", ticked);
// This function is run at each iteration of the force algorithm, updating the nodes position. // This function is run at each iteration of the force algorithm, updating the nodes position.
@ -83,9 +87,9 @@
<style> <style>
div { div {
height: 500px; height: 80vh;
width: 80%; width: 80vh;
} }
</style> </style>
<div id="c" /> <div bind:this={container} />