Arbre généalogique généré petit à petit

Version imprimable

19/01/2021, 15h05
encoremoi21258

2 pièce(s) jointe(s)

Arbre généalogique généré petit à petit

Bonjour,

Je souhaite faire une sorte d'arbre généalogique qui se génère petit à petit. Ce serait en HTML CSS JavaScript.

Au début on aurait ça:

Pièce jointe 588860

Puis quand on clique sur le + ça récupère les données pour la suite:

Pièce jointe 588861

Mais je n'arrive pas à trouver une manière d'ajouter les "branches" et de déplacer toutes les cases de façon à ce que tout soit bien ordonné et aligné, puisqu'une branche peut être plus longue qu'une autre.

Auriez vous une idée ?

Merci d'avance
19/01/2021, 15h55
mathieu

est ce que vous avez déjà fait une maquette en HTML du résultat que vous voulez avec 4 ou 5 cases par exemple ?
20/01/2021, 16h52
javatwister

Je pense qu'un treeview de type JSON (par exemple) serait une bonne base;

Exemple peu esthétique, pour le principe: http://javatwist.imingo.net/arbre.htm

Code:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Arbre</title>
 
<style>
.cache{display:none}
.pointer{cursor:pointer}
</style>
 
</head>
 
<body>
 
<div id="famille"></div>
 
<script>
const tab={
        "Marianne":{
                "Michel":{
                        "Marc":{
                                "Momo":{
                                        "Mauricette":null,
                                        "Mathis":"Marthe"
                                },
                                "Maurice":{
                                        "Michou":"Manon"
                                }
                        }
                },
                "Martine":"Morgane",
                "Maya":null,
                "Madeleine":{
                        "Mehdi":null,
                        "Maxime":{
                                "Maelis":null,
                                "Marius":{
                                        "Marguerite":null,
                                        "Marjorie":"Maud",
                                        "Magalie":null
                                }
                        }
                }
        }
}
 
document.addEventListener("DOMContentLoaded",()=>{
        let li0=document.createElement("li"),
        sp0=document.createElement("span"),
        ul0=document.createElement("ul");
        
        document.getElementById("famille").append(ul0);
        
        const run=(t,ref)=>{
                if(typeof t=="object"){
                        for(let i in t){
                                let li=li0.cloneNode(),
                                sp=sp0.cloneNode();
                                sp.textContent=i;
                                sp.addEventListener("click",(e)=>{
                                        if(e.target.nextSibling){
                                                e.target.nextSibling.classList.toggle("cache");
                                                if(sp.textContent.indexOf("+")!=-1){
                                                        sp.textContent=sp.textContent.replace("+","-")
                                                }
                                                else{
                                                        sp.textContent=sp.textContent.replace("-","+")
                                                }
                                        }
                                });
                                ref.append(li);
                                li.append(sp);
                                if(t[i]!=null){
                                        let ul=ul0.cloneNode();
                                        ul.classList.add("cache");
                                        li.append(ul);
                                        sp.textContent+=" + ";
                                        sp.classList.add("pointer");
                                        run(t[i],ul)
                                }
                                else{
                                        run(t[i],ref)
                                }
                        }
                }
                else{                   
                        let li=li0.cloneNode(),
                        sp=sp0.cloneNode();
                        sp.textContent=t;
 
                        ref.append(li);
                        li.append(sp);
                }
        }
        run(tab,document.querySelector("#famille ul"))
        document.querySelectorAll("#famille ul")[0].classList.remove("cache");
})
 
</script>
</body>
</html>

22/01/2021, 20h33
encoremoi21258

Bonjour,

L'arbre proposé par javatwister est ce qu'il me faut, puisque le placement s'adapte automatiquement au nombre et à la longueur des branches.

De base il devait s'afficher un rectangle avec un titre et une image, un peu comme ça: https://codepen.io/jejedu67/pen/qBaGryW

Mais je me rends compte que ça surchargerait la page. De plus, il y a trop de données à récupérer et le chargement de la page serait donc bien trop long.

Mon idée est donc de n'afficher que du texte, comme sur http://javatwist.imingo.net/arbre.htm et à côté à chaque fois on peut mettre l'image d'un oeil. Lors du clique sur cette image d'un oeil, une fenêtre modale s'affiche par dessus le tout. Dans cette fenêtre modale il y aurait donc la place pour tout mettre.

Là où ça se complique c'est la récupération des données ...

Dans mon cas il faudrait que seul le premier titre soit affiché sur la page, avec donc un oeil à côté. Lors du clique sur cette image d'un oeil, une fonction javascript se lance pour récupérer les données, par exemple RecupererDonnees("5cssd6"), la récupération je sais faire, l'affichage de la modale aussi. En fonction du paramètre le site saura les données à récupérer. Comme sur l'exemple, il y aurait aussi un "+" affiché pour voir la suite. Ce "+" aurait également un event clique qui lance une fonction afin de récupérer la suite de la "branche" et du coup s'il y a une suite, pour afficher la suite.

J'ai réussi à faire ça:
https://codepen.io/jejedu67/pen/QWKRgNw

Très vite se pose un problème car les id se répètent vu que ce n'est qu'un simple test, mais ça fonctionne enfin comme il faut. Merci beaucoup à javatwister pour m'avoir donné la façon de présenter l'arbre. Via une boucle javascript je vais à chaque fois pouvoir ajouter autant de <li> que nécessaire en mettant à chaque fois un id unique.

Petite maj pour tracer les ancêtres jusqu'au tronc (et corriger 2 ou 3 bêtises):

Code:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Arbre</title>
 
<style>
.cache{display:none;}
.pointer{cursor:pointer;}
.red{background:red;}
li{margin:15px;display:flex;align-items:center;justify-content:flex-start;}
#famille div{width:120px;}
</style>
 
</head>
 
<body>
 
<div id="famille"></div>
 
<script>
const tab={
        "Marianne":{
                "Michel":{
                        "Marc":{
                                "Momo":{
                                        "Mauricette":null,
                                        "Mathis":"Marthe"
                                },
                                "Maurice":{
                                        "Michou":"Manon",
                                        "Manuela":{
                                                "Manolo":"Manu"
                                        }
                                }
                        }
                },
                "Martine":"Morgane",
                "Maya":null,
                "Madeleine":{
                        "Mehdi":null,
                        "Maxime":{
                                "Maelis":null,
                                "Marius":{
                                        "Marguerite":null,
                                        "Marjorie":"Maud",
                                        "Magalie":null
                                }
                        }
                }
        }
}
 
document.addEventListener("DOMContentLoaded",()=>{
        let li0=document.createElement("li"),
        div0=document.createElement("div"),
        sp0=document.createElement("span"),
        ul0=document.createElement("ul");
        
        document.getElementById("famille").append(ul0);
        
// coloration des ascendants
        const col=ind=>{
                ind.addEventListener("mouseover",()=> {
                        for(i=3;i<ind.id.length+1;i++){
                                document.getElementById(ind.id.substring(0,i)).classList.add("red");
                        }
                })
                ind.addEventListener("mouseout",()=> {
                        for(i=3;i<ind.id.length+1;i++){
                                document.getElementById(ind.id.substring(0,i)).classList.remove("red");
                        }
                })
        };
        
// création de l'arbre dom
        const run=(t,ref,pre)=>{
// pour les ancêtres
                if(typeof t=="object"){
                        let num=0;
                        for(let i in t){num++;
                                let li=li0.cloneNode(),
                                div=div0.cloneNode(),
                                sp=sp0.cloneNode();
                                sp.textContent=i;
                                
// masquage / affichage des descendants
                                sp.addEventListener("click",(e)=>{
                                        if(e.target.parentElement.nextSibling){
                                                e.target.parentElement.nextSibling.classList.toggle("cache");
                                                if(sp.textContent.indexOf("+")!=-1){
                                                        sp.textContent=sp.textContent.replace("+","-")
                                                }
                                                else{
                                                        sp.textContent=sp.textContent.replace("-","+")
                                                }
                                        }
                                });
                                ref.append(li);
                                li.append(div);
                                sp.id="id"+pre+num;
                                div.append(sp);
                                col(sp)
 
// membres avec enfants
                                if(t[i]!=null){
                                        let ul=ul0.cloneNode();
                                        ul.classList.add("cache");
                                        li.append(ul);
                                        sp.textContent+=" +";
                                        sp.classList.add("pointer");
                                        run(t[i],ul,pre+num)
                                }
                        }
                }
// membres sans enfant
                else{                   
                        let li=li0.cloneNode(),
                        div=div0.cloneNode(),
                        sp=sp0.cloneNode();
                        sp.textContent=t;
                        sp.id="id"+pre+1;
                        ref.append(li);
                        li.append(div);
                        div.append(sp);
                        col(sp)
                }
        }
        
        run(tab,document.querySelector("#famille ul"),"")
        document.querySelectorAll("#famille ul")[0].classList.remove("cache");
})
 
</script>
</body>
</html>