Discussion :

[Apo94]

Bonjour,

Je cherche depuis quelque temps déjà a réaliser un arbre (type généalogique)
en tableau html. (c'est le seul moyen que j'ai trouvé pour le moment, pas de svg possible)

Mon arbre a un noeud racine et ensuite chaque branche a une profondeur identique mais un nombre de noeud variables.

Exemple au format XML avec une profondeur de 3:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<node depth="0" childs="3" name="root" order="1">
  <node depth="1" childs="6" name="a" order="1">
    <node depth="2" childs="4" name="a1" order="1">
      <node depth="3" childs="0"  name="a11" order="1"/>
      <node depth="3" childs="0"  name="a12" order="2"/>
      <node depth="3" childs="0"  name="a13" order="3"/>
      <node depth="3" childs="0"  name="a14" order="4"/>
    </node>
    <node depth="2" childs="3" name="a2" order="2">
      <node depth="3" childs="0"  name="a21" order="1"/>
      <node depth="3" childs="0"  name="a22" order="2"/>
      <node depth="3" childs="0"  name="a23" order="3"/>
    </node>
  </node>
  <node depth="1" childs="1" name="b" order="1">
    <node depth="2" childs="1" name="b1" order="1">
      <node depth="3" childs="0"  name="b11" order="1"/>
    </node>
  </node>
 
  <node depth="1" childs="3" name="c" order="1">
    <node depth="2" childs="1" name="c1" order="1">
      <node depth="3" childs="0"  name="c11" order="1"/>
    </node>
    <node depth="2" childs="1" name="c2" order="2">
      <node depth="3" childs="0"  name="c21" order="1"/>
    </node>
    <node depth="2" childs="5" name="c3" order="3">
      <node depth="3" childs="0"  name="c31" order="1"/>
      <node depth="3" childs="0"  name="c32" order="2"/>
      <node depth="3" childs="0"  name="c33" order="3"/>
      <node depth="3" childs="0"  name="c34" order="4"/>
      <node depth="3" childs="0"  name="c35" order="5"/>
    </node>
  </node>
</node>

Donc je me suis dit que j'allais mettre 2 cellules pour former un noeud et 1 cellule inter noeud.
Mais cela c'est pour une même fraterie de noeud (x noeud ayant le même parent) apres entre chaque fraterie il faut également un espacement (1 ou 2 cellule peut importe)

Pour la ligne du bas, pas souci. Pour les parents de la ligne du bas deja il faut prendre en compte les espace inter fraterie et plus on remonte dans l'arbre et plus on va avoir d'espace ok.
Mais la ou ma reflexion s'arrete c'est que je veux 'équilibrer' mon arbre, cad que chaque parent est au milieu de ses enfants (au dessus de celui du milieu si impair et entre les 2 du milieu si impair)

Et la je n'y arrive plus car je ne vois pas comment trouver la position du parent.


Bon je suis pas certain d'avoir était très clair, ça parle à quelqu'un ?

[Veovis]

Je pense que de le faire en HTML, te ferait perdre beaucoup trop de temps. Pourquoi ne veux tu pas générer une image ???

[Apo94]

Et bien déja il ne faut pas avoir besoin d'un plugin pour le lire donc pas de svg.
Et apres il me faut des 'liens' ou 'overlay' sur mes noeuds.

Mais si tu as une idée de generation d'image je suis preneur quand même.

[millie]

Et bien déja il ne faut pas avoir besoin d'un plugin pour le lire donc pas de svg.
Et apres il me faut des 'liens' ou 'overlay' sur mes noeuds.

Mais si tu as une idée de generation d'image je suis preneur quand même.

graphViz permet de générer des arbres ou des graphes au format que tu veux (png ou gif par exemple)

[Apo94]

Oui c'est pas mal graphiz mais ca me permet pas (sauf erreur ) d'y inserer des liens ?

[millie]

Si c'est possible. Mais il faut prendre un format d'image qui permet de l'utiliser.

[Apo94]

Et ce(s) format est il compatible avec IE sans plugin ?

[pseudocode]

Et ce(s) format est il compatible avec IE sans plugin ?

Sauf grosse regression dans IE8 (), je pense que GIF et JPEG sont supportés sans plugin.

http://www.graphviz.org/doc/info/output.html#d:cmapx

[Apo94]

edit..

Bon ok je vais tester les imagemap merci
je vous tiens au courrant

[Apo94]

Ca marche pas mal en effet :p

En revanche je n'arrive pas a trouver comment ajouter les attribut alt de chaque noeud sur mon image map.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
digraph G {
	graph [URL="default.html"]
	a [shape=box, color=blue, URL="a.html", bgcolor="red", alt="test"]
	b [URL="b.html"]
	c [URL="c.html"]
	a -> b
	a -> c
}

ca produit bien l'image map mais les attributs alt="" sont vides et sur leur doc je vois pas d'infos a ce niveau

[pseudocode]

ca produit bien l'image map mais les attributs alt="" sont vides et sur leur doc je vois pas d'infos a ce niveau

je crois qu'il faut utiliser la propriété "label" pour generer les tags alt, et "tooltip" pour generer les tags title.

[Apo94]

C'est pourtant bien ce que j'ai tenté, ca fonctionne pour le title mais pas pour le alt..

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
digraph G {
	graph [URL="default.html"]
	a [shape=box, URL="a.html",  label="noeud A", tooltip="aa"]
	b [URL="b.html"]
	c [URL="c.html"]
	a -> b
	a -> c
}

et le .map qu en résult:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<map id="G" name="G">
<area shape="rect" href="a.html" title="aa" alt="" coords="47,6,132,54"/>
...

[pseudocode]

Ah oui, c'est exact. Les devs de Graphviz en ont eu marre de gérer les spécificités de IE .

plugin\core\gvrender_core_map.c

Code C :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
        /*
	 * alt text is intended for the visually impaired, but such
	 * folk are not likely to be clicking around on a graph anyway.
	 * IE on the PC platform (but not on Macs) incorrectly
	 * uses (non-empty) alt strings instead of title strings for tooltips.
	 * To make tooltips work and avoid this IE issue,
	 * while still satisfying usability guidelines
	 * that require that there is always an alt string,
	 * we generate just an empty alt string.
	 */
        gvdevice_fputs(job, " alt=\"\"");

J'ai testé et leur méthode fonctionne sur IE: Mettre le title="xxx" et alt="" affichier bien le tooltip "xxx" sur IE.

[Apo94]

Parfait, merci beaucoup