Problématique

Dans certains cas, il peut être utile d'afficher un arbre ou une arborescence : arbre binaire, arbre complexe. Une représentation graphique est toujours plus efficace qu'un code XML parfois obscur pour des personnes non intitiés.

Solution

Une transformation XSL générant du SVG est justement ce qu'il nous faut.

Constitution de l'arbre XML

Il faudra d'abord générer un arbre simple en XML :

<tree>

<node level="1" order="1" label="A" id="A"/>
<node level="1" order="2" label="B" id="B"/>
...

La racine est constituée d'éléments (node) sans parents, avec les attributs :

level indiquant le niveau dans l'arborescence (pour la racine level="1")
order indiquant l'ordre horizontal pour l'affichage
label pour indiquer le texte à afficher
id un identifiant pour permettre aux autres niveaux de faire le lien avec un parent

Les autres éléments (niveaux supérieurs de l'arbre) seront reliés de la façon suivante :

Nous retrouvons les mêmes attributs pour node avec comme sous-éléments la description des parents. Pour chaque parent, il suffit juste d'utiliser le niveau (level) et identifiant (id). Un niveau n n'a pas forcément le niveau n-1 pour parents.

Mise en oeuvre

Il ne reste plus qu'à afficher l'arbre avec la feuille de style dynamique (téléchargeable ici) ou de générer un fichier svg avec la transformation statique (téléchargeable ici).

Exemples

Attention !

L'affichage de exemples nécessite un navigateur compatible SVG.

Vous pouvez visualiser la source afin de visualiser l'arbre au format XML.

Exemple 1 : plusieurs racines distinctes se rassemblant ensuite

Exemple 2 : lien entre deux niveaux non voisins