Discussion :

[headmax]

Je pense que tu as fait une erreur quelque part, regarde bien mon code : au regard de ton graphique tu n'utilise pas tel quel mon code, les flèches du graphique n'est pas le même, je serais un peu plus dispo demain, c'est la période des fêtes donc j'ai beaucoup de travail en ce moment.
Bonne soirée.

[Mr.Robot12]

Je pense que tu as fait une erreur quelque part, regarde bien mon code : au regard de ton graphique tu n'utilise pas tel quel mon code, les flèches du graphique n'est pas le même, je serais un peu plus dispo demain, c'est la période des fêtes donc j'ai beaucoup de travail en ce moment.
Bonne soirée.

je viens de retenter et j'ai toujours le même résultat.

la fonction que j'utilise pour lire le fichier JSON et alimenter la liste listeTachesBatch :

Code JAVASCRIPT :

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
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
 
var listeTachesBatch = [];
 
function loadJSON(fname)  {
	var xhr=createXHR();
	xhr.open("GET", fname,true);
	xhr.onreadystatechange=function() 
	{
		if (xhr.readyState == 4) 
		{
			if (xhr.status != 404) 
			{
				$.each(JSON.parse(xhr.responseText), function(i, objBatch) {
 
					var StringFichierSortie = "";
					var StringFichierEntree = "";
					var StringPredecesseur = "";
					var StringSuccesseur = "";
					//alert(objBatch.lien);
 
					var arr = objBatch.lesSuccesseurs.map(function (el) {
						if(el.nomBatch.length > 0) {  
							return el.nomBatch;
						} 
					});
 
					//console.log(arr);
 
					objBatch.lesPredecesseurs.forEach(function(predecesseur) {
						StringPredecesseur += predecesseur.nomBatch + ", ";
					});
					objBatch.lesSuccesseurs.forEach(function(successeur) {
						StringSuccesseur += successeur.nomBatch + ", ";
					});
					objBatch.lesFichiersEntrees.forEach(function(fichierEntree) {
						StringFichierEntree += fichierEntree.nom + ", ";
					});
					objBatch.lesFichiersSorties.forEach(function(fichierSortie) {
						StringFichierSortie += fichierSortie.nom + ", ";
					});
 
					listeTachesBatch.push({
						id : objBatch.idBatch,
						task : objBatch.nomBatch,
						type : objBatch.typeBatch,
						linkChart: objBatch.lien,
						startTime: objBatch.heureDebut,
						endTime: objBatch.heureFin,
						predecessor: StringPredecesseur.substring(0, StringPredecesseur.length-2),
						successor: StringSuccesseur.substring(0, StringSuccesseur.length-2),
						arraySuc: arr,
						entryFiles: StringFichierEntree.substring(0, StringFichierEntree.length-2),
						outputFiles: StringFichierSortie.substring(0, StringFichierSortie.length-2)
					});
				});
			} 
			else 
			{
				alert("Le fichier " + fname + " n'a pas été trouvé");
			}
		}
	}
	xhr.send(null);
}

code pour alimenter le graph (je vous mets juste cette partie là vu que tout le reste j'ai rien changé, les seuls modifs que j'ai faite c'est les couleurs des flèches et la couleur de fond du graph):

Code JAVASCRIPT :

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
 
var taskArray = [];
 
	listeTachesBatch.forEach(function(element) {
			taskArray.push({
				id: element.task,
				shortTask:element.id,
				task: element.task,
				type: element.task,
				typeBatch: element.type,
				linkChart: element.linkChart,
				debutPlusTot: element.startTime, //hour:minute:second
				debutPlusTard: element.endTime, //hour:minute:second
				startTime: "00:00:00", //hour:minute:second
				endTime: "00:00:00", //hour:minute:second
				dependsOn: [],
				originOn: element.arraySuc,
				predecessor: element.predecessor,
				successor: element.successor,
				entryFiles: element.entryFiles,
				outputFiles: element.outputFiles,
				parentOn: false,
				childOn: false,
				x:0,
				y:0,
				width:0,
				height:0
			});
	});
 
var dateFormat = d3.time.format("%H:%M:%S");

j'ai mis startTime et endTime à 00:00:00 comme vous et pourtant ça ne marche pas. je ne vois pas pourquoi ça ne marche pas pour ce modèle de flèche alors que pour les autres ça marchaient.

je vous mets également mon fichier JSON, dites-moi s'il y a une erreur dessus :

Code JSON :

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
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
 
[
    {
        "idBatch":null,
        "nomBatch":"ADHESION",
        "typeBatch":"sortant",
        "heureDebut":"00:30:00",
        "heureFin":"04:30:00",
        "lesFichiersEntrees":[],
        "lesFichiersSorties":[],
        "lesPredecesseurs":[
                                {
                                    "nomBatch":"GAIA"
                                },
                                {
                                    "nomBatch":"ETAT_BASE"
                                }],
        "lesSuccesseurs":[],
        "lien":"orga-ADHESION.svg"
    },
    {
        "idBatch":"AUTOR",
        "nomBatch":"AUTORISATION",
        "typeBatch":"entrant",
        "heureDebut":"01:00:00",
        "heureFin":"03:00:00",
        "lesFichiersEntrees":[
                                 {
                                    "nom":".ok"
                                 },
                                 {
                                    "nom":"TEP"
                                 }],
        "lesFichiersSorties":[
                                 {
                                    "nom":"AAU"
                                    }],
        "lesPredecesseurs":[
                                 {
                                    "nomBatch":"DGE_FACTURES"
                                    }],
        "lesSuccesseurs":[
                             {
                                "nomBatch":"STL_A_MAJTIP"
                             },
                             {
                                "nomBatch":"ICPSAR"
                             },
                             {  
                                "nomBatch":"FACTURES"
                             }],
        "lien":"orga-autorisation.svg"
    },
    {
        "idBatch":null,
        "nomBatch":"CODES_POSTAUX",
        "typeBatch":"entrant",
        "heureDebut":"10:00:00",
        "heureFin":"23:59:00",
        "lesFichiersEntrees":[
                                 {
                                    "nom":"psa_cficpt.txt"
                                    }],
        "lesFichiersSorties":[],
        "lesPredecesseurs":[],
        "lesSuccesseurs":[],
        "lien":"Schema_Codes_PostauxV38.svg"
    },
    {
        "idBatch":null,
        "nomBatch":"DGE_FACTURES",
        "typeBatch":"entrant",
        "heureDebut":"00:45:00",
        "heureFin":"04:45:00",
        "lesFichiersEntrees":[
                                 {
                                    "nom":".ok"
                                 },
                                 {
                                    "nom":"FA_"
                                 }],
         "lesFichiersSorties":[
                                 {
                                    "nom":"AFA"
                                 }],
         "lesPredecesseurs":[
                                {
                                    "nomBatch":"PAIEMENTDGE"
                                },
                                {
                                    "nomBatch":"PAIEMENT"
                                }],
         "lesSuccesseurs":[
                                {
                                    "nomBatch":"AUTORISATION"
                                },
                                {
                                    "nomBatch":"EXTRACTION_DGE"
                                },
                                {
                                    "nomBatch":"FACTURES"
                                }],
        "lien":"Schema_DGE_Factures.svg"
    },
    {
        "idBatch":"E",
        "nomBatch":"ETAT_BASE",
        "typeBatch":"sortant",
        "heureDebut":"00:23:00",
        "heureFin":"01:23:00",
        "lesFichiersEntrees":[],
        "lesFichiersSorties":[
                                {
                                    "nom":"ETATBASE_"
                                }],
        "lesPredecesseurs":[],
        "lesSuccesseurs":[
                            {
                                "nomBatch":"ADHESION"
                            }],
        "lien":"orga-EtatBase.svg"
    },
    {
        "idBatch":"EXTRDGE",
        "nomBatch":"EXTRACTION_DGE",
        "typeBatch":"entrant",
        "heureDebut":"04:00:00",
        "heureFin":"06:30:00",
        "lesFichiersEntrees":[
                                {
                                    "nom":"EXTDGE"
                                }],
        "lesFichiersSorties":[
                                {
                                    "nom":"REJETS_EXTDGE"
                                }],
        "lesPredecesseurs":[],
        "lesSuccesseurs":[],
        "lien":"orga-ext_dge.svg"
    },
    {
        "idBatch":"FCTR",
        "nomBatch":"FACTURES",
        "typeBatch":"entrant",
        "heureDebut":"01:15:00",
        "heureFin":"03:15:00",
        "lesFichiersEntrees":[
                                {
                                    "nom":"FA-"
                                },
                                {
                                    "nom":".ok"
                                }],
        "lesFichiersSorties":[
                                {
                                    "nom":"AFA"
                                }],
        "lesPredecesseurs":[
                                {
                                    "nomBatch":"DGE_FACTURES"
                                },
                                {
                                    "nomBatch":"PAIEMENT"
                                },
                                {
                                    "nomBatch":"AUTORISATION"
                                }],
        "lesSuccesseurs":[],
        "lien":"orga-facture.svg"
    },
    {
        "idBatch":null,
        "nomBatch":"PAIEMENT",
        "typeBatch":"sortant",
        "heureDebut":"00:15:00",
        "heureFin":"03:15:00",
        "lesFichiersEntrees":[],
        "lesFichiersSorties":[
                                {
                                    "nom":"PP"
                                },
                                {
                                    "nom":"EP"
                                },
                                {
                                    "nom":"DBL"
                                },
                                {
                                    "nom":"PB"
                                },
                                {
                                    "nom":"EB"
                                },
                                {
                                    "nom":"PA"
                                }],
        "lesPredecesseurs":[
                                {
                                    "nomBatch":"PAIEMENTDGE"
                                }],
        "lesSuccesseurs":[
                             {
                                "nomBatch":"FACTURES"
                             },
                             {
                                "nomBatch":"DGE_FACTURES"
                             }],
        "lien":"orga-PAIEMENT.svg"
    },
    {
        "idBatch":null,
        "nomBatch":"POSTES_COMPTABLES",
        "typeBatch":"entrant",
        "heureDebut":"10:20:00",
        "heureFin":"23:59:00",
        "lesFichiersEntrees":[
                                {
                                    "nom":"psnnomen.txt"
                                }],
        "lesFichiersSorties":[],
        "lesPredecesseurs":[],
        "lesSuccesseurs":[],
        "lien":"Batch_-POSTES_COMPTABLES_V38.svg"
    },
    {
        "idBatch":"PURGE_DEMND",
        "nomBatch":"PURGE_DEMANDE",
        "typeBatch":"purge",
        "heureDebut":"00:30:00",
        "heureFin":"04:30:00",
        "lesFichiersEntrees":[],
        "lesFichiersSorties":[],
        "lesPredecesseurs":[],
        "lesSuccesseurs":[],
        "lien":"Schema_Purge_DemandesV38.svg"
    },
    {
        "idBatch":"P_DGE_FT_VNT",
        "nomBatch":"PURGE_DGE_FACTURE_VERSEMENT",
        "typeBatch":"purge",
        "heureDebut":"00:45:00",
        "heureFin":"04:45:00",
        "lesFichiersEntrees":[],
        "lesFichiersSorties":[],
        "lesPredecesseurs":[],
        "lesSuccesseurs":[],
        "lien":"Schema_PurgeVersementFacture_V20.svg"
    },
    {
        "idBatch":"PR_FC",
        "nomBatch":"PURGE_FACTURE",
        "typeBatch":"purge",
        "heureDebut":"01:15:00",
        "heureFin":"03:15:00",
        "lesFichiersEntrees":[],
        "lesFichiersSorties":[],
        "lesPredecesseurs":[],
        "lesSuccesseurs":[],
        "lien":"Schema_Purge_FactureV38.svg"
    },
    {
        "idBatch":"P_F_H",
        "nomBatch":"PURGE_FACTURE_HISTORIQUE",
        "typeBatch":"purge",
        "heureDebut":"01:15:00",
        "heureFin":"03:15:00",
        "lesFichiersEntrees":[],
        "lesFichiersSorties":[],
        "lesPredecesseurs":[
                                {
                                    "nomBatch":"CONTROLE_DOUBLON"
                                }],
        "lesSuccesseurs":[],
        "lien":"Schema_Purge_Facture_historiqueV38.svg"
    },
    {
        "idBatch":null,
        "nomBatch":"TABANK",
        "typeBatch":"entrant",
        "heureDebut":"10:10:00",
        "heureFin":"23:59:00",
        "lesFichiersEntrees":[
                                {
                                    "nom":"PSGSDDDV"
                                }],
        "lesFichiersSorties":[],
        "lesPredecesseurs":[
                                {
                                    "nomBatch":"ICPSAR"
                                }],
        "lesSuccesseurs":[],
        "lien":"Schema_TABANK_v38.svg"
    }
]

je suis allé sur votre code CodePen et j'ai mis ça et c'est le même résultat :

Code JAVASCRIPT :

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
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
 
    var taskArray = [
  {
    id: "ADHESION",
    task: "ADHESION",
    type: "ADHESION",
    debutPlusTot:"00:30",
    debutPlusTard:"04:30",
    startTime: "00:00", //year/month/day
    endTime: "00:00",
    details: "This actually didn't take any conceptualization",
    dependsOn: [],
    originOn: [],  
    parentOn: true,
    childOn: true,
    x:0,
    y:0,
    width:0,
    height:0
    },
    {
    id: "AUTORISATION",
    task: "AUTORISATION",
    type: "AUTORISATION",
    debutPlusTot:"01:00",
    debutPlusTard:"03:00",
    startTime: "00:00", //year/month/day
    endTime: "00:00",
    details: "This actually didn't take any conceptualization",
    dependsOn: [],
    originOn: ["FACTURES"],  
    parentOn: true,
    childOn: true,
    x:0,
    y:0,
    width:0,
    height:0
    },
    {
    id: "CODESPOSTAUX",
    task: "CODESPOSTAUX",
    type: "CODESPOSTAUX",
    debutPlusTot:"10:00",
    debutPlusTard:"23:59",
    startTime: "00:00", //year/month/day
    endTime: "00:00",
    details: "This actually didn't take any conceptualization",
    dependsOn: [],
    originOn: [],  
    parentOn: true,
    childOn: true,
    x:0,
    y:0,
    width:0,
    height:0
    },
    {
    id: "DGE_FACTURES",
    task: "DGE_FACTURES",
    type: "DGE_FACTURES",
    debutPlusTot:"00:45",
    debutPlusTard:"04:45",
    startTime: "00:00", //year/month/day
    endTime: "00:00",
    details: "This actually didn't take any conceptualization",
    dependsOn: [],
    originOn: ["AUTORISATION", "EXTRACTION_DGE", "FACTURES"],  
    parentOn: true,
    childOn: true,
    x:0,
    y:0,
    width:0,
    height:0
    },
    {
    id: "ETAT_BASE",
    task: "ETAT_BASE",
    type: "ETAT_BASE",
    debutPlusTot:"00:23",
    debutPlusTard:"01:23",
    startTime: "00:00", //year/month/day
    endTime: "00:00",
    details: "This actually didn't take any conceptualization",
    dependsOn: [],
    originOn: ["ADHESION"],  
    parentOn: true,
    childOn: true,
    x:0,
    y:0,
    width:0,
    height:0
    },
    {
    id: "EXTRACTION_DGE",
    task: "EXTRACTION_DGE",
    type: "EXTRACTION_DGE",
    debutPlusTot:"04:00",
    debutPlusTard:"06:30",
    startTime: "00:00", //year/month/day
    endTime: "00:00",
    details: "This actually didn't take any conceptualization",
    dependsOn: [],
    originOn: [],  
    parentOn: true,
    childOn: true,
    x:0,
    y:0,
    width:0,
    height:0
    },
    {
    id: "FACTURES",
    task: "FACTURES",
    type: "FACTURES",
    debutPlusTot:"01:15",
    debutPlusTard:"03:15",
    startTime: "00:00", //year/month/day
    endTime: "00:00",
    details: "This actually didn't take any conceptualization",
    dependsOn: [],
    originOn: [],  
    parentOn: true,
    childOn: true,
    x:0,
    y:0,
    width:0,
    height:0
    },
    {
    id: "PAIEMENT",
    task: "PAIEMENT",
    type: "PAIEMENT",
    debutPlusTot:"00:15",
    debutPlusTard:"03:15",
    startTime: "00:00", //year/month/day
    endTime: "00:00",
    details: "This actually didn't take any conceptualization",
    dependsOn: [],
    originOn: ["FACTURES", "DGE_FACTURES"],  
    parentOn: true,
    childOn: true,
    x:0,
    y:0,
    width:0,
    height:0
    },
    {
    id: "POSTES_COMPTABLES",
    task: "POSTES_COMPTABLES",
    type: "POSTES_COMPTABLES",
    debutPlusTot:"10:20",
    debutPlusTard:"23:59",
    startTime: "00:00", //year/month/day
    endTime: "00:00",
    details: "This actually didn't take any conceptualization",
    dependsOn: [],
    originOn: [],  
    parentOn: true,
    childOn: true,
    x:0,
    y:0,
    width:0,
    height:0
    },
    {
    id: "PURGE_DEMANDE",
    task: "PURGE_DEMANDE",
    type: "PURGE_DEMANDE",
    debutPlusTot:"00:30",
    debutPlusTard:"04:30",
    startTime: "00:00", //year/month/day
    endTime: "00:00",
    details: "This actually didn't take any conceptualization",
    dependsOn: [],
    originOn: [],  
    parentOn: true,
    childOn: true,
    x:0,
    y:0,
    width:0,
    height:0
    },
    {
    id: "PURGE_DGE_FACTURE_VERSEMENT",
    task: "PURGE_DGE_FACTURE_VERSEMENT",
    type: "PURGE_DGE_FACTURE_VERSEMENT",
    debutPlusTot:"00:45",
    debutPlusTard:"04:45",
    startTime: "00:00", //year/month/day
    endTime: "00:00",
    details: "This actually didn't take any conceptualization",
    dependsOn: [],
    originOn: [],  
    parentOn: true,
    childOn: true,
    x:0,
    y:0,
    width:0,
    height:0
    },
    {
    id: "PURGE_FACTURE",
    task: "PURGE_FACTURE",
    type: "PURGE_FACTURE",
    debutPlusTot:"01:15",
    debutPlusTard:"03:15",
    startTime: "00:00", //year/month/day
    endTime: "00:00",
    details: "This actually didn't take any conceptualization",
    dependsOn: [],
    originOn: [],  
    parentOn: true,
    childOn: true,
    x:0,
    y:0,
    width:0,
    height:0
    },
    {
    id: "PURGE_FACTURE_HISTORIQUE",
    task: "PURGE_FACTURE_HISTORIQUE",
    type: "PURGE_FACTURE_HISTORIQUE",
    debutPlusTot:"01:15",
    debutPlusTard:"03:15",
    startTime: "00:00", //year/month/day
    endTime: "00:00",
    details: "This actually didn't take any conceptualization",
    dependsOn: [],
    originOn: [],  
    parentOn: true,
    childOn: true,
    x:0,
    y:0,
    width:0,
    height:0
    },
    {
    id: "TABANK",
    task: "TABANK",
    type: "TABANK",
    debutPlusTot:"10:10",
    debutPlusTard:"23:59",
    startTime: "00:00", //year/month/day
    endTime: "00:00",
    details: "This actually didn't take any conceptualization",
    dependsOn: [],
    originOn: [],  
    parentOn: true,
    childOn: true,
    x:0,
    y:0,
    width:0,
    height:0
    }
];

je ne vois pas du tout où est l'erreur dans mon json vu que pour les autres modèle ça n'avait pas fait ça.....

il faut pas oublier que j'ai encore au moins 20 tâches à ajouter dans le graph. du coup est-ce que je devrais toutes les ajouter pour avoir le graph finale et ensuite travailler sur les flèches ?
perso je sais pas si c'est une bonne idée

[Mr.Robot12]

j'ai l'impression que c'est debutPlusTard qui pose problème.
j'ai vérifié ça avec vos données du graph mais également les miens.

dans les votre j'ai pris la tâche HTML et dès que je modifie debutPlusTard j'ai le même résultat que j'ai pour l'instant, càd les flèches ne sont pas tracées correctement.
je m'explique : je peux changer autant de fois que je veux le debutPlusTot la flèche reste correctement tracée mais dès que je change debutPlusTard ça marche plus.
du moment que debutPlusTard n'est plus 05:00 ça marche plus (pour cette tâche).



debutPlusTot on peut mettre ce qu'on veut en laissant 05:00 pour debutPlusTard ça change rien sur la flèche (j'ai mis 00:00 au lieu de 02:00 pour tester justement):


c'est vraiment très bizarre, j'ai du mal à comprendre pourquoi ça fait ça

[Mr.Robot12]

j'ai fais ça mais le résultat est quasi illisible :

j'ai mis +20 à la place de -70 (entouré en rouge sur l'image) et j'ai eu ce résultat.
je pense pas que c'est bon vu que c'est vachement illisible et en plus la tâche que j'ai entouré en bleu je ne peux pas afficher le tag.

[headmax]

Désolé je suis vraiment occupé, d'où le peu d'intervention sur le forum, je te fait un truc vite fait, j'ai corrigé ton json essayé de respecté les parenton childon boolean tu as des catégories isolés et tu met a true ses deux paramètres. Bref j'ai fait un truc vite fait adapté a ton modèle.



Démo:
https://codepen.io/anon/pen/opXdOL

[Mr.Robot12]

non pas de problème.
je vais regarder et encore merci. je vous tiens au courant.
mais d'où venait le problème du coup ?

y'a un truc que je ne comprends pas là... pourquoi quand je met dans mon code ça marche pas ?
est-ce que c'est la partie ou je lis le fichier json et en suite la partie où j'aliment la liste taskArray qui bug ?

[NoSmoking]

Je n'ai pas regaré le code en profondeur mais j'ai quand même l'impression, je me trompe sûrement, que vous vous compliquez la vie

Pour ce que est de l'exemple apporté par NoSmoking c'est la logique que j'ai déjà adopté sachant qu'on est dans le cadre SVG le CSS peux apporter du changement a nos svg, mais la logique de comment dessiner n'est pas du tout la même.

Ici on parle de MOVETO (M), LINETO (L), (h) horizontal, (v) vertical c'est du dessin, on utilise via la technique du path "chemin" pour dessiner voir https://www.w3.org/TR/SVG/paths.html anisi que des markers, des lines, rects, texts, circles ... etc

la démarche est strictement la même si ce n'est la façon de définir les « path » qui va changer.

Je vous mets un exemple, mais en SVG cette fois ci, on retrouve pile-poil l'algo que j'ai donné

Code html :

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
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Trace-relation</title>
<meta name="Author" content="NoSmoking">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
html, body {
  font: 1em/1.25 Verdana;
}
h1, h2, h3 {
  color: #069;
}
header, section {
  position: relative;
  margin: auto;
  max-width: 60em;
}
#canvas {
  display: block;
  width: 100%;
  margin: auto;
  max-width: 60em;
}
[class^="case-"] {
  cursor: pointer;
}
text {
  font-size: .8em;
  pointer-events: none;
}
.case-rouge {
  fill: #ECD;
  stroke: #CAB;
  stroke-width: 1px;
}
.case-vert {
  fill: #DEC;
  stroke: #BCA;
  stroke-width: 1px;
}
.case-bleu {
  fill: #CDE;
  stroke: #ABD;
  stroke-width: 1px;
}
[class^="case-"]:hover {
  stroke-width: 2px;
}
[class^="case-"].hover ~ * {
  color: #F00;
  stroke-width: 2px;
}
.trait {
  color: #069;
  stroke: currentColor;
  fill: none;
  stroke-width: 1px;
}
.ancre-depart, .arrow-right {
  color: #069;
  fill: currentColor;
  stroke: none;
}
</style>
</head>
<body>
  <header>
    <h1>[SVG] Trace relations</h1>
  </header>
  <section>
   <svg id="canvas"></svg>
  </section>
<script>
"use strict";
var donnees = [
  {
    "id": "case_1",
    "label" : "Arrivée #3",
    "class": "case-vert",
    "x": 500,
    "y": 316,
    "width": 194,
    "height": 80,
    "next": "case_3"
  },
  {
    "id": "case_2",
    "label" : "Départ #1",
    "class": "case-bleu",
    "x": 200,
    "y": 160,
    "width": 194,
    "height": 48,
    "next": "case_3,case_1"
  },
  {
    "id": "case_3",
    "label" : "Arrivée #1",
    "class": "case-rouge",
    "x": 160,
    "y": 80,
    "width": 194,
    "height": 48,
    "next": ""
  },
  {
    "id": "case_4",
    "label" : "Départ #2",
    "class": "case-bleu",
    "x": 240,
    "y": 240,
    "width": 104,
    "height": 48,
    "next": "case_5  "
  },
  {
    "id": "case_5",
    "label" : "Arrivée #2",
    "class": "case-rouge",
    "x": 240,
    "y": 300,
    "width": 194,
    "height": 48,
    "next": "case_1  "
  }
];
/**
 */
var fctLine = d3.svg.line()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  });
/**
 */
function getPath(depart, arrivee) {
  // initialisation
  var oDepart = document.getElementById(depart);
  var oArrivee = document.getElementById(arrivee);
  // gestion minimum
  if( oDepart && oArrivee){
    var obj_depart = oDepart.getBBox();
    var obj_arrivee = oArrivee.getBBox();
 
    var decalX = 20; // par exemple
    var ancre_depart = {
      'x': obj_depart.x + obj_depart.width,
      'y': obj_depart.y + obj_depart.height / 2
    };
    var ancre_arrivee = {
      'x': obj_arrivee.x,
      'y': obj_arrivee.y + obj_arrivee.height / 2
    };
    var hauteur_fleche = ancre_arrivee.y - ancre_depart.y;
    var largeur_fleche = (ancre_depart.x - ancre_arrivee.x) + (decalX * 2);
    /*=======================================================
    * c'est ici qu'il y aurait à traiter des cas particuliers
    * ex : retour arrière sur la même ligne
    *========================================================*/
    // deplacement
    var pos = {
      'x': ancre_depart.x,
      'y': ancre_depart.y
    };
    // création du path
    var data = [];
    data.push( {"x":pos.x, "y":pos.y});
    //  pos = moveToX(pos.x, pos.y, decalX, color);
    pos.x += decalX;
    data.push( {"x":pos.x, "y":pos.y});
    //  pos = moveToY(pos.x, pos.y, hauteur_fleche / 2, color);
    pos.y += hauteur_fleche /2;
    data.push( {"x":pos.x, "y":pos.y});
    //  pos = moveToX(pos.x, pos.y, - largeur_fleche, color);
    pos.x -= largeur_fleche;
    data.push( {"x":pos.x, "y":pos.y});
    //  pos = moveToY(pos.x, pos.y, hauteur_fleche / 2, color);
    pos.y += hauteur_fleche /2;
    data.push( {"x":pos.x, "y":pos.y});
    //  pos = moveToX(pos.x, pos.y, decalX, color);
    pos.x += decalX;
    data.push( {"x":pos.x, "y":pos.y});
    return data;
  }
}
/**
 */
function drawFleche(groupe, pos) {
  groupe.append("polyline")
    .attr("transform", "translate(" + (pos.x - 10) + "," + (pos.y - 5) + ") scale(1)")
    .attr("class", "arrow-right")
    .attr("points", "0,0 10,5,0,10,0,5,0,0");
}
/**
 */
function drawPoint(groupe, pos) {
  groupe.append('circle')
    .attr("class", "ancre-depart")
    .attr("cx", pos.x)
    .attr("cy", pos.y)
    .attr("r", 4);
}
/**
 */
function handleMouseOver() {
  var obj = this;
  // ajout class"hover" pour prise en compte CSS
  var d3Obj = d3.select(obj);
  var classe = d3Obj.attr("class");
  d3Obj.attr("class", classe + " hover");
  // déplace le parent dans l'arbre pour le mettre au dessus des autres
  // ATTENTION pour IE il faut travailler dans le sens inverse, on déplace
  // les autres éléments vers le bas sinon l'événement se reproduit
  var oParent = obj.parentNode;
  var allGroupe = d3.selectAll("g");
  allGroupe[0].forEach(function(elem) {
    if (elem !== oParent) {
      oParent.parentNode.insertBefore(elem, oParent);
    }
  });
  //  oParent.parentNode.appendChild( oParent);
}
/**
 */
function handleMouseOut() {
  var obj = this;
  // supprime classe "hover"
  var d3Obj = d3.select(obj);
  var classe = d3Obj.attr("class");
  d3Obj.attr("class", classe.replace(" hover", ""));
}
 
//
var svgContainer=d3.select("#canvas")
  .attr("transform", "translate(0,0)")
  .attr("height",500);
 
// création des rectangles
var i;
var nb = donnees.length;
var centre;
var oGroupe;
for (i = 0; i < nb; i += 1) {
  // création d'un groupe
  oGroupe = svgContainer.append("g");
  // création rectangle dans groupe
  oGroupe.append("rect")
    .attr("class", donnees[i].class)
    .attr("id", donnees[i].id)
    .attr("x", donnees[i].x)
    .attr("y", donnees[i].y)
    .attr("width", donnees[i].width)
    .attr("height", donnees[i].height)
    .on("mouseleave", handleMouseOut)
    .on("mouseenter", handleMouseOver);
 
  // calcul position texte
  centre = {
    "x": donnees[i].x + (donnees[i].width) / 2,
    "y": donnees[i].y + (donnees[i].height) / 2
  };
  // ajout du label
  oGroupe.append("text")
    .attr("transform", "translate(" + centre.x + "," + centre.y + ")")
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "central")
    .text(donnees[i].label);
  // sauve parent
  donnees[i].groupe = oGroupe;
}
// tracés des liaisons
var oNext;
var path;
var groupe;
nb = donnees.length;
for (i = 0; i < nb; i += 1) {
  if (donnees[i].next) {
    // plusieurs liaisons possible
    oNext = donnees[i].next.split(',');
    oNext.forEach(function(next_id) {
      path = getPath(donnees[i].id, next_id.trim());
      if (path) {
        groupe = donnees[i].groupe;
        groupe.append('path')
          .attr('d', fctLine(path))
          .attr('class', 'trait');
        // ajout fleche en fin
        drawFleche(groupe, path.pop());
        // ajout ancre départ
        drawPoint(groupe, path.shift());
      }
    });
  }
}
</script>
</body>
</html>

il y a de plus une astuce pour mettre au premier plan, le SVG étant à plat et les z-index sur des éléments SVG étant inopérant.

Bon ok je n'est regardé que la partie point d'ancrage

Remarque d'ordre générale, ton graphe est dense peut être trop !

[Mr.Robot12]

Je n'ai pas regaré le code en profondeur mais j'ai quand même l'impression, je me trompe sûrement, que vous vous compliquez la vie
la démarche est strictement la même si ce n'est la façon de définir les « path » qui va changer.

vous pensez que c'est pas bonne façon de faire ?

Remarque d'ordre générale, ton graphe est dense peut être trop !

j'y peux rien moi..... et en plus il en reste encore au moins 20 tâches à ajouter.
vous pensez que ça va poser problème du coup ?

[headmax]

Salut @NoSmoking, le soucis dans ton n'exemple, c'est qu'il n'inclus pas la timeline, les notions de catégories et leur propre nextsibling (pour les mêmes type de catégorie, les indépendants qui pointe hors catégories, les prédécesseurs et les successeurs, etc.

l y a de plus une astuce pour mettre au premier plan, le SVG étant à plat et les z-index sur des éléments SVG étant inopérant.

Bon ok je n'est regardé que la partie point d'ancrage

L'astuce cet de passer le noeud html dans notre cas $('svg.svg g') en append a la fin de la liste le met automatiquement au premier plan, et le faire remonté de niveau child-nth(+x) déclencher par l'event onmouseover tu as un example dans mon dernier lien.

Code :

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

1
2
3
4
5
6
7
8
 
}).on('mouseover', function(){
     var fleche = ($(this).attr('id') === undefined) ? $(this).css({'stroke':'#000000'}).attr("id", (ID)).parent() : $(this).css({'stroke':'#000000'}).parent();
     $('svg.svg').append(fleche);
}).on('mouseout', function(e){
    var fleche = $(this).css({'stroke':coloration});
 $('svg.svg #'+ $(this).attr('id')).replaceWith(fleche)
...

Merci pour ton aide .

[Mr.Robot12]

headmax vous pensez que je génère mal le fichier JSON et que je le lis mal en suite?
Vu que quand je mets les données en dur c'est bon mais quand je mets le bout de code pour alimenter dynamiquement ça marche plus

[headmax]

Non je pense pas que tu le gère mal seulement que tu si tu es partie pour faire beaucoup de catégories, ça risque d'être gourmand en réadaptation, car on est partie sur un exemple qui n'implémentait pas la notion de dynamisme au niveau de la taille, on était tout de suite limité a 800 sur 400 et mon erreur est bien là avec bien d'autres celle de n'avoir par eu toutes les notions que tu as apporté au fur et a mesure qu'on avançait d’où l'importance d'un cahier des charges très explicite pour ne pas revenir en arrière a défaut de ne pas avoir implémenté une fonctionnalité, se qui au fils des posts se voit assez facilement les changements radicaux "la notion de début au plus tôt" et "début au plus tard", les lignes qui on changées en fonction des apports donnés après coup, tous ça se paye en temps, un conseil prend du temps pour cerner un projet, ne fonce pas tête baissé, en croyant que tu as tout compris. Une question ne coûte pas d'argent à la différence d'un projet qui avance et qui recule ... par oubli, par désidérata hiéarchique tout cela est chronophage et ça fini comme le dit NoSmoking en complication ou usine à gaz .

[Mr.Robot12]

si je gère bien le json qu'est-ce qui cloche alors ? pourquoi ça ne marche pas ?
ce que je comprends pas c'est pourquoi ça ne marche pas quand j'alimente le graph dynamiquement mais que ça marche quand je mets les données en dur. surtout en sachant que les données mis en dur sont tirés du json.
pour les catégories je pense je peux faire un regroupement par type (entrant, sortant, entrant-sortant......), ça y'a pas de problème..... moi c'est pourquoi ça marche pas que je veux comprendre

[headmax]

Si tu ne met pas par exemple a ton JSON les bon parentOn childOn tu ne ferme pas la catégorie en cours lors qu'on a les deux a false on considère qu'on est en début de catégorie donc il ne ferme pas la catégorie.
Pour le cas du json, j'ai corrigé certaine partie qui surement provoquait le bug que tu as, mais si tu as beaucoup plus de données donne moi le bon, je pense pas que tu veux y passé du temps, dans ce cas donne moi l'intégralité si ça fait moins d'une 50 catégories alors il me faudra ce json.

Pour ce qui est du pourquoi ça marche ou pas il faut que tu règle la taille pour voir toutes les données, car si la totalité des lignes dépasse la max height soit actuellement je l'ai mit à 800px, alors certaines de tes données ne pourrait pas s'afficher.
Au critère foireux, dans la partie qui check la min width pour forcer si on créer une flèche a 2 ou 3 tracés horizontales, il faut que tu règle cette variable lorsque tu as toute tes données afin de trouver la valeur idéal pour 50 data ou plus.

Code :

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

1
2
3
 
//ici je regarde si x est négative ou possitif par rapport à position x2 du nextsibling ou du parent vers dependsOn en jouant avec ses données tu pourra remarqué que te flèche changerons de sens selon tes désir suffit de trouvé le bon coef.
var width_tmp = (x >= x2) ? (parseInt(x-x2) < 50 || parseInt(x-x2) > 155)

D'autres critère peu impacté le rendu, une timeline différente en taille, en durée ... une task sans debut au plus tard peu avoir un impact sur le rendu.
Je me répète, donne la totalité en pièce jointe du json en privée si c'est du data sensible ou public si c'est des généralités, ou adapte le pour que ça le soit.

La question du script java qui interagi mal, ou un json mal formaté, copie ton json et essaye de checker sur un outil online validator json si est valide, ce que je doute pas.

[Mr.Robot12]

merci pour vos clarifications. je vais mettre toutes les données et créer un JSON complet du coup. je vous le donne mercredi vu que je serai là bas ce jour. il y a dans les trentaine concernant le nombre de tâches. ça va me prendre un peu de temps pour faire le tri mais pas de problème. jusque là bonne semaine et je vous contacte mercredi du coup....

concernant la validité du fichier JSON je viens de le vérifier et il est bien valide.

du coup c'est surement parentOn et childOn qui pose problème alors comme vous avez dit

bonne soirée

[NoSmoking]

• point #1

L'astuce cet de passer le noeud html dans notre cas $('svg.svg g') en append a la fin de la liste le met automatiquement au premier plan, et le faire remonté de niveau child-nth(+x) déclencher par l'event onmouseover tu as un example dans mon dernier lien.

L'astuce n'est pas dans la mise au premier plan, tous ceux qui ont traité du SVG ont du s'en rendre compte, mais dans le fait qu'il faille descendre les autres éléments dans l'arbre plutôt que l'inverse.

En effet IE est réfractaire et déclenche l'événement « mouseover» sans interruption à chaque mouvement de la souris.

Dans ton cas cela réapplique le changement sans arrêt, vérifie dans la console sous IE, mais si tu travailles en changeant la classe du conteneur, ce qui m'apparaît comme étant une meilleur technique, la gestion de la classe devient problématique.

• point #2

le soucis dans ton n'exemple, c'est qu'il n'inclus pas la timeline, les notions de catégories et leur propre nextsibling (pour les mêmes type de catégorie, les indépendants qui pointe hors catégories, les prédécesseurs et les successeurs, etc.

Je ne vois pas où il y a de soucis, j'ai prévenu que je n'avais pas tout traité

Bon ok je n'est regardé que la partie point d'ancrage

Pour les prédécesseurs et les successeurs je ne comprend pas la démarche, pour moi il existe une liaison entre une élément « origine » et un « arrivé », noté next dans mes données, et l'inverse n'est pas utile pour le tracé. Si besoin il est possible de le récupérer facilement ou de le stocker dans l'objet de départ.

Pour les autres notions, l'adaptation est rapide, à voir dans la nouvelle version.

• point #3

ce que je comprends pas c'est pourquoi ça ne marche pas quand j'alimente le graph dynamiquement mais que ça marche quand je mets les données en dur. surtout en sachant que les données mis en dur sont tirés du json.

Peut être devrais tu nous montrer comment tu t'y prend pour intégrer tes données.

• SVG Trace-relation ver. 2

Code html :

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
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Trace-relation ver. 2</title>
<meta name="Author" content="NoSmoking">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
html, body {
  font: 1em/1.25 Verdana;
}
h1, h2, h3 {
  color: #069;
}
header, section {
  position: relative;
  margin: auto;
  max-width: 60em;
}
#canvas {
  display: block;
  margin: auto;
  padding: 1em;
  max-width: 60em;
  box-shadow: 0 0 20px #CCC;
  shape-rendering: crispEdges;
}
[class^="case-"] {
  cursor: pointer;
  stroke-width: 1px;
}
.case-rouge {
  fill: #ECD;
  stroke: #906;
}
.case-vert {
  fill: #DEC;
  stroke: #690;
}
.case-bleu {
  fill: #CDE;
  stroke: #069;
}
[class^="case-"]:hover {
  stroke-width: 2px;
  shape-rendering: auto;
}
[class^="case-"].hover ~ * {
  color: #F00;
  stroke-width: 2px;
}
text {
  display: block;
  font-size: .8em;
  pointer-events: none;
}
.trait {
  color: #069;
  stroke: currentColor;
  fill: none;
  stroke-width: 1px;
}
.ancre-depart, .arrow-right {
  color: #069;
  fill: currentColor;
  stroke: none;
  shape-rendering: auto;
}
.tick text {
  font-size: .6em;
  font-style: italic;
  fill: #069;
  stroke: none;
}
.axis line {
  fill: none;
  stroke: #CCC;
  stroke-width: 1;
  shape-rendering: crispEdges;
  stroke-dasharray: 4 4;
}
.axis path.domain {
  fill: rgba(240,240,240,.5);
  fill: rgba(128,128,128,0.1);
  stroke: none;
  stroke-opacity: 0;
}
</style>
</head>
<body>
  <header>
    <h1>[SVG] Trace relations</h1>
  </header>
  <section>
   <svg id="canvas"></svg>
  </section>
<script>
"use strict";
var donnees = [
  {
    "id": "case_1",
    "label" : "Libellé #1",
    "class": "case-vert",
    "x": 500,
    "y": 400,
    "width": 194,
    "height": 48,
    "heureDeb": "6:30",
    "duree": "11:30",
    "next": "case_2,case_6"
  },
  {
    "id": "case_2",
    "label" : "Libellé #2",
    "class": "case-bleu",
    "x": 200,
    "y": 100,
    "width": 194,
    "height": 48,
    "heureDeb": "0",
    "duree": "4:30",
    "next": "case_3,case_1,case_4"
  },
  {
    "id": "case_3",
    "label" : "Libellé #3",
    "class": "case-rouge",
    "x": 160,
    "y": 50,
    "width": 194,
    "height": 48,
    "heureDeb": "3:30",
    "duree": "3",
    "next": ""
  },
  {
    "id": "case_4",
    "label" : "Libellé #4",
    "class": "case-bleu",
    "x": 240,
    "y": 150,
    "width": 104,
    "height": 48,
    "heureDeb": "3:30",
    "duree": "2:30",
    "next": "case_5  "
  },
  {
    "id": "case_5",
    "label" : "Libellé #5",
    "class": "case-rouge",
    "x": 240,
    "y": 200,
    "width": 194,
    "height": 48,
    "heureDeb": "8:30",
    "duree": "2:30",
    "next": "case_1  "
  },
  {
    "id": "case_6",
    "label" : "Libellé #6",
    "class": "case-vert",
    "x": 500,
    "y": 450,
    "width": 194,
    "height": 48,
    "heureDeb": "19:00",
    "duree": "2",
    "next": ""
  }
];
const LARG_GRAPHE = 960;
const HAUT_GRAPHE = 500;
const MARGIN_LEFT = 25;
const MARGIN_RIGHT = 25;
const MARGIN_TOP = 12;
const MIN_JOUR = 24 *60;
const DEFAULT_HEIGHT = 30;
const DUREE_MIN = "1:30";
/*
 */
function getLargeurTemps(tps) {
  if (tps.split) {
    var largeur = LARG_GRAPHE - MARGIN_LEFT - MARGIN_RIGHT;
    var a = tps.split(":");
    var minute = a[0] * 60;
    minute += (a[1] || 0) * 1;
    return largeur * minute / MIN_JOUR;
  }
  return tps
}
/**
 */
var fctLine = d3.svg.line()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  });
/**
 */
function getPath(depart, arrivee) {
  // initialisation
  var oDepart = document.getElementById(depart);
  var oArrivee = document.getElementById(arrivee);
  // gestion minimum
  if( oDepart && oArrivee){
    var obj_depart = oDepart.getBBox();
    var obj_arrivee = oArrivee.getBBox();
 
    var decalX = getLargeurTemps("0:30");  //20; // par exemple
    var ancre_depart = {
      "x": obj_depart.x + obj_depart.width,
      "y": obj_depart.y + obj_depart.height / 2
    };
    var ancre_arrivee = {
      "x": obj_arrivee.x,
      "y": obj_arrivee.y + obj_arrivee.height / 2
    };
    var hauteur_fleche = ancre_arrivee.y - ancre_depart.y;
    var largeur_fleche = (ancre_depart.x - ancre_arrivee.x) + (decalX * 2);
    /*=======================================================
    * c'est ici qu'il y aurait à traiter des cas particuliers
    * ex : retour arrière sur la même ligne
    *========================================================*/
    var dist = ancre_arrivee.x - ancre_depart.x;
    if (dist > 0) {
      decalX = dist / 2;
      largeur_fleche = dist - decalX * 2;
    }
 
    // deplacement
    var pos = {
      "x": ancre_depart.x,
      "y": ancre_depart.y
    };
    // création du path
    var data = [];
    data.push( {"x":pos.x, "y":pos.y});
    //  pos = moveToX(pos.x, pos.y, decalX, color);
    pos.x += decalX;
    data.push( {"x":pos.x, "y":pos.y});
    //  pos = moveToY(pos.x, pos.y, hauteur_fleche / 2, color);
    pos.y += hauteur_fleche /2;
    data.push( {"x":pos.x, "y":pos.y});
    //  pos = moveToX(pos.x, pos.y, - largeur_fleche, color);
    pos.x -= largeur_fleche;
    data.push( {"x":pos.x, "y":pos.y});
    //  pos = moveToY(pos.x, pos.y, hauteur_fleche / 2, color);
    pos.y += hauteur_fleche /2;
    data.push( {"x":pos.x, "y":pos.y});
    //  pos = moveToX(pos.x, pos.y, decalX, color);
    pos.x += decalX;
    data.push( {"x":pos.x, "y":pos.y});
    return data;
  }
}
/**
 */
function drawFleche(groupe, pos) {
  groupe.append("polyline")
    .attr("transform", "translate(" + (pos.x - 10) + "," + (pos.y - 5) + ") scale(1)")
    .attr("class", "arrow-right")
    .attr("points", "0,0 10,5,0,10,0,5,0,0");
}
/**
 */
function drawPoint(groupe, pos) {
  groupe.append('circle')
    .attr("class", "ancre-depart")
    .attr("cx", pos.x)
    .attr("cy", pos.y)
    .attr("r", 4);
}
/**
 */
function handleMouseOver() {
  var obj = this;
  // ajout class"hover" pour prise en compte CSS
  var d3Obj = d3.select(obj);
  var classe = d3Obj.attr("class");
  d3Obj.attr("class", classe + " hover");
  // déplace le parent dans l'arbre pour le mettre au dessus des autres
  // ATTENTION pour IE il faut travailler dans le sens inverse, on déplace
  // les autres éléments vers le bas sinon l'événement se reproduit
  var oParent = obj.parentNode;
  var allGroupe = d3.selectAll("#data-graph g");
  allGroupe[0].forEach(function(elem) {
    if (elem !== oParent) {
      oParent.parentNode.insertBefore(elem, oParent);
    }
  });
  //  oParent.parentNode.appendChild( oParent);
}
/**
 */
function handleMouseOut() {
  var obj = this;
  // supprime classe "hover"
  var d3Obj = d3.select(obj);
  var classe = d3Obj.attr("class");
  d3Obj.attr("class", classe.replace(" hover", ""));
}
/**
 */
 function drawFondGraphe(svg){
  // trace legende axe X
  var dateFormat = d3.time.format('%H:%M');
  var x = d3.time.scale()
      .domain([dateFormat.parse("0:0"), dateFormat.parse("24:0") ])
      .range([MARGIN_LEFT, LARG_GRAPHE -MARGIN_RIGHT]);
 
  var xAxis = d3.svg.axis()
      .scale(x)
      .ticks(  d3.time.minute, 60)
      .orient("top")
      .tickFormat(dateFormat)
      .tickSize(HAUT_GRAPHE - MARGIN_TOP);
 
  // on place dans un conteneur de fond
  var svgFond = svg.append("g")
      .attr("transform","translate(0,"+(HAUT_GRAPHE)+")")
      .attr("id", "back-graph");
 
  svgFond .append("g")
      .attr("class", "x axis")
      .call(xAxis);
 }
/*
 */
function drawRectangles( svg){
  var i;
  var nb = donnees.length;
  var centre;
  var oGroupe;
  var posX;
  // création conteneur
  var svgData = svg.append("g")
      .attr("id", "data-graph");
 
  // création des rectangles
  for (i = 0; i < nb; i += 1) {
    // création d'un groupe
    oGroupe = svgData.append("g");
    // calcul position dans graphe
    donnees[i].x = getLargeurTemps(donnees[i].heureDeb) +MARGIN_LEFT;
    donnees[i].width = getLargeurTemps(donnees[i].duree) || getLargeurTemps(DUREE_MIN);
    donnees[i].height = DEFAULT_HEIGHT;
    // création rectangle dans groupe
    oGroupe.append("rect")
      .attr("class", donnees[i].class)
      .attr("id", donnees[i].id)
      .attr("x", donnees[i].x)
      .attr("y", donnees[i].y)
      .attr("width", donnees[i].width)
      .attr("height", donnees[i].height)
      .on("mouseleave", handleMouseOut)
      .on("mouseenter", handleMouseOver);
 
    // calcul position texte
    centre = {
      "x": donnees[i].x + (donnees[i].width) / 2,
      "y": donnees[i].y + (donnees[i].height) / 2
    };
    // ajout du label
    oGroupe.append("text")
      .attr("x", centre.x)
      .attr("y", centre.y)
      .attr("text-anchor", "middle")
      .attr("dominant-baseline", "central")
      .text(donnees[i].label);
    // sauve parent
    donnees[i].groupe = oGroupe;
  }
}
/**
 */
function drawRelations( svg){
  // tracés des liaisons
  var i;
  var nb = donnees.length;
  var oNext;
  var path;
  var groupe;
  for (i = 0; i < nb; i += 1) {
    if (donnees[i].next) {
      // plusieurs liaisons possible
      oNext = donnees[i].next.split(",");
      oNext.forEach(function(next_id) {
        path = getPath(donnees[i].id, next_id.trim());
        if (path) {
          groupe = donnees[i].groupe;
          groupe.append("path")
            .attr("d", fctLine(path))
            .attr("class", "trait");
          // ajout fleche en fin
          drawFleche(groupe, path.pop());
          // ajout ancre départ
          drawPoint(groupe, path.shift());
        }
      });
    }
  }
}
/////////////////////////////////////////
var svgContainer=d3.select("#canvas")
  .attr("transform", "translate(0,0)")
  .attr("width",LARG_GRAPHE)
  .attr("height",HAUT_GRAPHE);
 
drawFondGraphe(svgContainer);
drawRectangles(svgContainer);
drawRelations(svgContainer);
</script>
</body>
</html>

[Mr.Robot12]

Peut être devrais tu nous montrer comment tu t'y prend pour intégrer tes données.

je lis mon fichier JSON avec ce code :

Code JAVASCRIPT :

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
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
 
var listeTachesBatch = [];
 
function loadJSON(fname)  {
	var xhr=createXHR();
	xhr.open("GET", fname,true);
	xhr.onreadystatechange=function() 
	{
		if (xhr.readyState == 4) 
		{
			if (xhr.status != 404) 
			{
				$.each(JSON.parse(xhr.responseText), function(i, objBatch) {
 
					var StringFichierSortie = "";
					var StringFichierEntree = "";
					var StringPredecesseur = "";
					var StringSuccesseur = "";
					//alert(objBatch.lien);
 
					var arr = objBatch.lesSuccesseurs.map(function (el) {
						if(el.nomBatch.length > 0) {  
							return el.nomBatch;
						} 
					});
 
					//console.log(arr);
 
					objBatch.lesPredecesseurs.forEach(function(predecesseur) {
						StringPredecesseur += predecesseur.nomBatch + ", ";
					});
					objBatch.lesSuccesseurs.forEach(function(successeur) {
						StringSuccesseur += successeur.nomBatch + ", ";
					});
					objBatch.lesFichiersEntrees.forEach(function(fichierEntree) {
						StringFichierEntree += fichierEntree.nom + ", ";
					});
					objBatch.lesFichiersSorties.forEach(function(fichierSortie) {
						StringFichierSortie += fichierSortie.nom + ", ";
					});
 
					listeTachesBatch.push({
						id : objBatch.idBatch,
						task : objBatch.nomBatch,
						type : objBatch.typeBatch,
						linkChart: objBatch.lien,
						startTime: objBatch.heureDebut,
						endTime: objBatch.heureFin,
						predecessor: StringPredecesseur.substring(0, StringPredecesseur.length-2),
						successor: StringSuccesseur.substring(0, StringSuccesseur.length-2),
						arraySuc: arr,
						entryFiles: StringFichierEntree.substring(0, StringFichierEntree.length-2),
						outputFiles: StringFichierSortie.substring(0, StringFichierSortie.length-2)
					});
				});
			} 
			else 
			{
				alert("Le fichier " + fname + " n'a pas été trouvé");
			}
		}
	}
	xhr.send(null);
}

ensuite le parcours la liste listeTachesBatch pour alimenter la liste taskArray :

Code JAVASCRIPT :

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
 
var taskArray = [];
 
	listeTachesBatch.forEach(function(element) {
			taskArray.push({
				id: element.task,
				shortTask:element.id,
				task: element.task,
				type: element.task,
				typeBatch: element.type,
				linkChart: element.linkChart,
				debutPlusTot: element.startTime, //hour:minute:second
				debutPlusTard: element.endTime, //hour:minute:second
				startTime: "00:00:00", //hour:minute:second
				endTime: "00:00:00", //hour:minute:second
				dependsOn: [],
				originOn: element.arraySuc,
				predecessor: element.predecessor,
				successor: element.successor,
				entryFiles: element.entryFiles,
				outputFiles: element.outputFiles,
				parentOn: false,
				childOn: false,
				x:0,
				y:0,
				width:0,
				height:0
			});
	});
 
var dateFormat = d3.time.format("%H:%M:%S");

vous voyez quelque chose que j'ai mal faite ?

[NoSmoking]

Plusieurs remarques :

• en voyant cette ligne de code $.each(JSON.parse(xhr.responseText), function(i, objBatch) { on note que tu utilises jQuery, donc pourquoi ne pas l'utiliser pour ta requête Ajax ?

• On voit que tu « retravailles » la structure de la réponse pour l'utiliser dans ton code. En général on formate la réponse coté serveur pour qu'elle colle directement au besoin ou encore on code coté client en fonction de la réponse mais tout refaire n'est pas signe de cohérence.

• Pourquoi passer par une variable tampon, listeTachesBatch, pour ensuite initialiser ton autre variable de travail,taskArray ?

• Ta requête Ajax est asynchrone, donc tu ne peux utiliser le résultat retourné par celle-ci que lorsqu'il est retourné
En d'autres termes il te faut initialiser ta variable et l'utiliser, un truc du style :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function loadJSON(fname) {
  var xhr = createXHR();
  xhr.open('GET', fname, true);
  xhr.onload = function () {
    // initialisation de la variable
    taskArray = JSON.parse(this.responseText);
    // utilisation de la variable via une fonction de rappel par exemple
    fctCallBack(taskArray);
  };
  xhr.onerror = function (error) {
    console.log(error)
  };
  xhr.send(null);
}

je pense que ton problème se situe à ce niveau.

[Mr.Robot12]

• en voyant cette ligne de code $.each(JSON.parse(xhr.responseText), function(i, objBatch) { on note que tu utilises jQuery, donc pourquoi ne pas l'utiliser pour ta requête Ajax ?

eeeuuuuuuh j'ai pas compris

• On voit que tu « retravailles » la structure de la réponse pour l'utiliser dans ton code. En général on formate la réponse coté serveur pour qu'elle colle directement au besoin ou encore on code coté client en fonction de la réponse mais tout refaire n'est pas signe de cohérence.
• Pourquoi passer par une variable tampon, listeTachesBatch, pour ensuite initialiser ton autre variable de travail,taskArray ?

vu que la structure de mon fichier JSON n'est pas le même qu'attend D3 je suis obligé de formater au bon format pour D3. enfin d'après moi

[NoSmoking]

eeeuuuuuuh j'ai pas compris

• Attendu que tu utilises jQuery autant utiliser jQuery.ajax()

vu que la structure de mon fichier JSON n'est pas le même qu'attend D3 je suis obligé de formater au bon format pour D3. enfin d'après moi

• Tu t'adaptes à D3JS et D3JS s'adapte à ton code et inversement, cela ne doit pas te faire mettre une structure alambiquée.

si l'on prend

Code :

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

1
2
listeTachesBatch.push({
  id : objBatch.idBatch,

pour faire ensuite

Code :

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

1
2
3
4
listeTachesBatch.forEach(function(element) {
    taskArray.push({
    id: element.task,
    shortTask:element.id, // ICI c'est égal à objBatch.idBatch,

autant mettre tout de suite les bons identifiants !


• Si tu n'as pas d'erreur avec cette ligne JSON.parse(xhr.responseText, regarde la console F12, alors reprend le dernier point que je t'ai signalé.

[Mr.Robot12]

Bonne année

NoSmoking j'ai réussi à mettre la partie de votre code qui trace les liens mais j'aimerais que les liens deviennent rouge comme dans votre cas. si j'ai bien compris c'est votre fonction pour tracer les rectangles qui gère ceci. je ne peux pas l'utiliser car je n'ai pas la même structure de données, et surtout je n'ai pas de durée pour une tâche.
j'ai essayé de mettre un id pour les traits et ensuite de changer la couleur quand je passe par dessus une tâche avec du jQuery mais ça ne marche pas.
pouvez-vous m'aider svp ?