Composant · Données

ChordDiagram

Documenté

ChordDiagram représente des flux pondérés entre nœuds disposés sur un cercle. Chaque nœud occupe un arc proportionnel à la somme de ses flux, et chaque flux est un ruban reliant deux arcs.

Exemples

Échanges entre régions

Quelques flux dirigés ; les arcs sont dimensionnés par la somme des flux du nœud.

Échanges entre régions

Europe -> Asie: 24
Asie -> Amérique: 18
Amérique -> Europe: 12
Europe -> Amérique: 9

Voir le code (Svelte)

<div class="chart-wrapper chart-wrapper--radial">
  <ChordDiagram
    label="Échanges entre régions"
    data={[{"from":"Europe","to":"Asie","value":24},{"from":"Asie","to":"Amérique","value":18},{"from":"Amérique","to":"Europe","value":12},{"from":"Europe","to":"Amérique","value":9}]}
  />
</div>

Libellés personnalisés

Les identifiants techniques restent stables tandis que `labels` fournit l'affichage.

Libellés personnalisés

Europe -> Asie: 24
Asie -> Amérique: 18
Amérique -> Europe: 12

Voir le code (Svelte)

<div class="chart-wrapper chart-wrapper--radial">
  <ChordDiagram
    label="Libellés personnalisés"
    data={[{"from":"eu","to":"as","value":24},{"from":"as","to":"am","value":18},{"from":"am","to":"eu","value":12}]}
    labels={{"eu":"Europe","as":"Asie","am":"Amérique"}}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`ChordDiagramFlow[]`	requis
`label`	`string`	requis
`labels`	`Record<string, string>`	optionnel
`width`	`number`	`360`
`height`	`number`	`360`
`class`	`string`	optionnel

ChordDiagramFlow = { from: string; to: string; value: number }. Un nœud est créé pour chaque identifiant from/to cité.

Accessibilité

`label` nomme le graphique (role=img). Chaque flux est exposé dans une liste accessible au format « source -> cible : valeur ».

Notes d'usage

Les flux dont la valeur n'est pas finie ou est négative/nulle sont ignorés. Limitez le nombre de nœuds pour préserver la lisibilité des rubans.

Tokens

--st-semantic-data-category1 ... --st-semantic-data-category8
--st-semantic-text-secondary
--st-semantic-surface-default
--st-semantic-surface-inverse
--st-semantic-text-inverse
--st-radius-sm