95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
|
import './style.css'
|
|||
|
|
import Graph from "https://esm.sh/graphology";
|
|||
|
|
import Sigma from "https://esm.sh/sigma";
|
|||
|
|
import forceAtlas2 from "https://esm.sh/graphology-layout-forceatlas2";
|
|||
|
|
|
|||
|
|
// --- Génération de données de base ---
|
|||
|
|
const graph = new Graph();
|
|||
|
|
|
|||
|
|
const N = 30;
|
|||
|
|
const colors = ["#ec635e", "#61afef", "#2c3029ff", "#e5c07b"];
|
|||
|
|
for (let i = 0; i < N; i++) {
|
|||
|
|
const sex = Math.random() < 0.5 ? "F" : "M";
|
|||
|
|
const education = Math.floor(Math.random() * 4);
|
|||
|
|
const color = colors[education];
|
|||
|
|
graph.addNode(`n${i}`, {
|
|||
|
|
x: i, y: i,
|
|||
|
|
label: `${sex}${i}`,
|
|||
|
|
sex,
|
|||
|
|
education,
|
|||
|
|
size: 6 + education,
|
|||
|
|
color,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- Ajout de quelques liens initiaux ---
|
|||
|
|
for (let i = 0; i < N * 1.5; i++) {
|
|||
|
|
const a = `n${Math.floor(Math.random() * N)}`;
|
|||
|
|
const b = `n${Math.floor(Math.random() * N)}`;
|
|||
|
|
if (a !== b && !graph.hasEdge(a, b)) {
|
|||
|
|
graph.addEdge(a, b, { color: "#aaa", size: 1 });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// With settings:
|
|||
|
|
const positions = forceAtlas2(graph, {
|
|||
|
|
iterations: 50,
|
|||
|
|
settings: {
|
|||
|
|
gravity: 10
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// --- Placement automatique avec ForceAtlas2 ---
|
|||
|
|
//forceAtlas2.assign(graph);
|
|||
|
|
|
|||
|
|
// --- Rendu Sigma ---
|
|||
|
|
const container = document.getElementById("app");
|
|||
|
|
const renderer = new Sigma(graph, container, { renderLabels: true });
|
|||
|
|
|
|||
|
|
// --- Fonctions dynamiques ---
|
|||
|
|
function addLink(source, target) {
|
|||
|
|
if (!graph.hasEdge(source, target)) {
|
|||
|
|
graph.addEdge(source, target, { color: "#666" });
|
|||
|
|
renderer.refresh();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function removeLink(source, target) {
|
|||
|
|
if (graph.hasEdge(source, target)) {
|
|||
|
|
graph.dropEdge(source, target);
|
|||
|
|
renderer.refresh();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- Exemple d’évolution dynamique ---
|
|||
|
|
setTimeout(() => addLink("n0", "n5"), 3000);
|
|||
|
|
setTimeout(() => removeLink("n1", "n2"), 6000);
|
|||
|
|
|
|||
|
|
console.log("Graph loaded:", graph.order, "nodes,", graph.size, "edges");
|
|||
|
|
|
|||
|
|
//import typescriptLogo from './typescript.svg'
|
|||
|
|
//import viteLogo from '/vite.svg'
|
|||
|
|
//import { setupCounter } from './counter.ts'
|
|||
|
|
/*
|
|||
|
|
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
|
|||
|
|
<div>
|
|||
|
|
<a href="https://vite.dev" target="_blank">
|
|||
|
|
<img src="${viteLogo}" class="logo" alt="Vite logo" />
|
|||
|
|
</a>
|
|||
|
|
<a href="https://www.typescriptlang.org/" target="_blank">
|
|||
|
|
<img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
|
|||
|
|
</a>
|
|||
|
|
<h1>Vite + TypeScript</h1>
|
|||
|
|
<div class="card">
|
|||
|
|
<button id="counter" type="button"></button>
|
|||
|
|
</div>
|
|||
|
|
<p class="read-the-docs">
|
|||
|
|
Click on the Vite and TypeScript logos to learn more
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
`
|
|||
|
|
|
|||
|
|
setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
|
|||
|
|
*/
|