Composant · Données

ForceGraph

Documenté

Graphe à force dirigée pour visualiser une ontologie (nœuds + liens). La simulation de force est autonome (aucune dépendance type d3 ajoutée au paquet) : répulsion entre nœuds, ressorts sur les liens, gravité douce vers le centre, refroidissement progressif. Nœuds colorés par group/tone (palette data-vis), focusables au clavier, tooltip au survol/focus, liens faibles en pointillé. Le layout est déterministe (graine fixe) et figé sous prefers-reduced-motion.

Exemple

Auteur

Œuvre

Manuscrit

Relation faible

Voir le code (Svelte)

<ForceGraph
  label="Ontologie de démo"
  width={460}
  height={300}
  edgeCurve={0.2}
  repulsion={1.4}
  nodes={[{"id":"auteur","label":"Auteur","shape":"box","tone":"category1"},{"id":"oeuvre","label":"Œuvre","shape":"diamond","tone":"category2"},{"id":"lieu","label":"Lieu","shape":"triangle","tone":"category3"},{"id":"perso","label":"Personnage","shape":"star","tone":"category4"},{"id":"indice","label":"Indice","shape":"square","tone":"category5"},{"id":"manuscrit","label":"Manuscrit","shape":"roundedbox","tone":"category6"}]}
  edges={[{"source":"auteur","target":"oeuvre","relation":"a écrit","emphasis":true},{"source":"oeuvre","target":"lieu","relation":"se déroule à","dash":"dashed"},{"source":"oeuvre","target":"perso","relation":"présente"},{"source":"perso","target":"indice","relation":"laisse","dash":"dotted"},{"source":"oeuvre","target":"manuscrit","relation":"conservé dans","dash":"long-dash"}]}
  legend={[{"label":"Auteur","shape":"box","tone":"category1"},{"label":"Œuvre","shape":"diamond","tone":"category2"},{"label":"Manuscrit","shape":"roundedbox","tone":"category6"},{"label":"Relation faible","dash":"dashed"}]}
/>

Sélection de nœuds

Cliquez ou appuyez sur Espace / Entrée sur un nœud pour le sélectionner (highlight). Double-clic ou Entrée active onOpenEntity. La position des nœuds reste stable, la simulation n'est pas relancée.

Aucun nœud sélectionné: cliquez sur un nœud.

Fusion de nœuds (mergePair)

mergePair anime la réconciliation de deux entités : le nœud from glisse vers into (avec ses liens), puis reste masqué jusqu'à ce que le consommateur le retire des données. Passer un id neuf (re)joue l'animation ; onMergeComplete(pair) signale la fin (au plus une fois par id, immédiatement sous prefers-reduced-motion).

API du composant

Prop	Type	Par défaut
`nodes`	`ForceGraphNode[]`	requis
`edges`	`ForceGraphEdge[]`	requis
`label`	`string`	requis (a11y)
`width` / `height`	`number`	`480` / `360`
`nodeRadius`	`number`	`7`
`showLabels`	`boolean`	`true`
`iterations`	`number`	`300`
`selectedIds`	`string[]`	`[]`
`focusId`	`string \| null`	`null`
`onSelect`	`(id: string) => void`	N/A
`onOpenEntity`	`(id: string) => void`	N/A
`mergePair`	`{ id, from, into } \| null`	`null`
`onMergeComplete`	`(pair) => void`	N/A

ForceGraphNode = { id, label?, group?, tone?, weight?, fx?, fy? }. ForceGraphEdge = { source, target, relation?, weak? }. Les nœuds partageant un group reçoivent la même tonalité ; tone force une couleur explicite ; weak: true affiche un lien faible (pointillé).