Afficher des flèches de dépendences dans le diagramme de Gantt D3.js

Version imprimable

Voir 40 message(s) de cette discussion en une page

18/11/2017, 17h56
headmax

1 pièce(s) jointe(s)

Salut je vois, j'ai donc opté pour les markers pour dessiner un svg a partir d'un dessin d'une flèche et j'ai aussi mit mes anciennes lignes en opacity a 0 si tu souhaite faire un mixte des deux, je pense que le topic est riche et il me semble qu'il soit aussi résolu a toi de voir ;).
Pour l'exemple ci dessus vaux mieux montrer mon nouveau rendu, j'ai définitivement supprimé le trop plein a force de manipulation polydata n'est pas utilisé du moins ne l'ai plus.

Pièce jointe 328415

démo :

https://codepen.io/headmax/pen/qVpPLx?editors=1011
19/11/2017, 12h51
Mr.Robot12

bonjour,

merci pour votre réponse. en faite comme je vous l'ai dit dans mon cas j'ai des tâches avec une seule dépendances successeur et d'autres qui en ont plusieurs. or dans votre code le cas où une tâche n'a qu'une seule dépendances elle est perçu comme une dépendance prédécesseur. du coup comme je vous l'ai dis dans mon cas c'est pas bon. c'est pour ça que je vous ai demandé si ce serait possible de prendre en compte seulement les dépendances successeurs que ce soit une ou plusieurs.

dites-moi si c'est possible car autrement je ne saurai comment avancer....

merci

1 pièce(s) jointe(s)

Soit ton schéma a homis quelque chose soit, j'ai pas saisit ta demande :aie:.

Citation:

tâches avec une seule dépendances successeur

Selon le graphique obtenu le cas :
dependsOn = a vide [] il est le parent mais peux être l'enfant de si childOn est a true pour le cas de m06 , il n'a pas de parent et est isolé du groupe HTML
parentOn = m06 il est parent de son sucesseur donc true
childOn = m06 n'est l'enfant de personne donc false
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { id: "m06", task: "advertise", type: "promotion", startTime: "05:50", endTime: "10:10", details: "This counts, right?", dependsOn: [], parentOn: true, childOn: false, x:0, y:0, width:0, height:0 }
Pièce jointe 328516

L'idée n'est pas de faire des loops de tes données pour afficher ici c'est de générer un JSON dans la logique du mapping JSON, je pense que tu t'y prend mal dans ta conceptualisation ou tu n'a pas tout dit, j'attends toujours ton exemple sur tes données afin d'être dans le concret que dans l'abstraction. Merci

si on prend votre code le m07 a une tâche parente(donc une dépendance prédécesseur). ce que je voudrais c'est que cette dépendance soit mis dans le m06 aulieu de m07
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { id: "m06", task: "advertise", type: "promotion", startTime: "05:50", endTime: "10:10", details: "This counts, right?", dependsOn: ['m07'], ----> c'est pour indiquer que m07 est la dépendance successeur de m06 parentOn: true, childOn: false, x:0, y:0, width:0, height:0 },
du coup on enleve dans la tâche m07 dependsOn :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { id: "m07", task: "spam links", type: "promotion", startTime: "10:10", endTime: "15:23", dependsOn: [], ---> c'est vide car on a dit dans m06 que m07 est le successeur de m06 parentOn: false, childOn: true, x:0, y:0, width:0, height:0 },
du coup en faite à aucun moment on déclare des dépendances prédécesseurs, on ne déclare que des successeurs que ce soit un seul ou plusieurs (successeurs) pour une tâche

19/11/2017, 13h59
headmax

En fait dans mes précédents post j'ai parlé de l'attribut "dependsOn", j'ai dit que si il y a une seule référence selon le cas que tu cite dependsOn:['m07'] alors il est parent de l'id m07 passé en paramètre et doit faire partie du même type, si dependsOn:['m01', 'm08'] alors la logique change et le node json qui contient cette référence ce voit changer il ne devient pas enfant mais parent de task id m01 et m08 et peu importe le type.

Dans la logique ici c'était qu'on est des task qui se suivent "nextsibling" mais selon les informations rajouté on a du changé la logique pour adapté au nouveau cas qu'il fallait lié des types différents donc je suis partie en mode "flem" et j'ai dit alors dans ce cas je rajouterais un pseudo tableau qui devrait faire l'affaire, ensuite vient le cas des cercles qui devait être présent dans les nœuds dépendants, alors j'ai rajouté deux nouveaux attributs parentOn childOn qui eux sert la logique mais pour les deux types.

J'avoue que c'est pas facile a saisir d'un point vue sémantique, mais rien ne t'empêche de les renommer comme bon te semble, en tout cas le graphique montre bien celui que tu m'a donné précédemment maintenant le plus gros du travail est de rajouté les algos afin de générer le bon json ici ton principal boulot le reste c'est le script qui jouera le rôle.
19/11/2017, 14h11
Mr.Robot12

Citation:

Envoyé par headmax

En fait dans mes précédents post j'ai parlé de l'attribut "dependsOn", j'ai dit que si il y a une seule référence selon le cas que tu cite dependsOn:['m07'] alors il est parent de l'id m07 passé en paramètre et doit faire partie du même type, si dependsOn:['m01', 'm08'] alors la logique change et le node json qui contient cette référence ce voit changer il ne devient pas enfant mais parent de task id m01 et m08 et peu importe le type.

et donc ce n'est pas possible de faire pour des types différentes ?
19/11/2017, 14h19
headmax

Citation:

Envoyé par thusitha1996

et donc ce n'est pas possible de faire pour des types différentes ?

En l'état du script pour un seul id via dependsOn il est en nextsibling et c'est la logique par contre rien t'empêche de faire un dependsOn['monidtypedifferent', ''] et de rajouté cette condition dans la boucle qui check si c'est un array donc type different et si lors du loop tu check si c'est pas vide alors ce sera possible, tout est possible ...

Si tu souhaite qu'on modifie la logique est la sémantique des attributs on peux toujours faire ça, alors propose moi la logique pour le nextsibling qui dans le cas concret se base sur le noeud element html suivant et de même type comment nommé cette attribut, idem pour l'attribut seul ou plusieurs qui est parent de et qui va ciblé par l'id et pas en nextsibling car le noeud html est pas son successeur... etc
19/11/2017, 14h23
Mr.Robot12

je ne suis pas très doué en js et surtout avec D3. du coup est ce que vous pourriez svp me montrer le code ?:ave:
19/11/2017, 14h31
headmax

En fait ça marche déjà car je check effectivement si c'est vide donc si tu souhaite avoir un type différent, passe un second index a vide a dependsOn:['id', ''].
19/11/2017, 14h34
Mr.Robot12

vu que dans mon cas je génère le taskArray dynamiquement comme je devrais faire du coup ?
faire un taskArray.push("") après la boucle de génération ?
19/11/2017, 14h42
headmax

Comment tu génère ton JSON il faut que je vois et faudrait que je t'indique comment générer ton JSON.
Je te propose de clore le topic et de passer au chat "développement web".
19/11/2017, 19h35
Mr.Robot12

je vous montrerai comment je génère mon json le mercredi vu que je ne serai là-bas qu'à partir de mercredi.
20/11/2017, 01h00
headmax

1 pièce(s) jointe(s)

Salut j'ai donc comme je l'avais dit séparé les attributs du json dependsOn pour sa version array pour originOn version array.

Citation:

dependsOn:[] //élément sans parent [nœud]
dependsOn:[id] //dépendant de son parent 'id' ce nœud est donc le successeur du parent [parent(id)]---->[nœud] un seul type ou plusieurs selon si le type est en "nextsibling" le suivant
originOn:[] //élément neutre sans action
originOn:[id1, id2, id3] //le nœud devient Parent de [noeud]--->-->-->[enfant:id1][enfant:id2][enfant:id3]
parentOn:boolean (si le noeud end est parent d'un enfant ou des enfants) intérêt disposer ou pas d'information tooltip
childOn:boolean (si le noeud start est enfant d'un parent ou de parents) même intérêt.

Comme tu peux le voir j'ai rajouté des flèches toutes on la couleurs de leur type sauf les flèches verte qui sont des originOn de type différent

Pièce jointe 328661

démo :
https://codepen.io/headmax/full/WXdmRw/

comme promis je vous met la structure de mon fichier JSON:

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
 
[
    {
    "nomBatch":"TABANK",
    "lesFichiersEntrees":
                        [
                            {
                            "nom":"PSGSDDDV"
                            }
                        ],
    "lesFichiersSorties":[],
    "lesPredecesseurs":
                      [
                        {
                        "nomBatch":"PAIEMENT"
                        }
                      ],
    "lesSuccesseurs":
                    [
                        {
                        "nomBatch":"ICPSAR"
                        }
                    ],
    "heureDebut":"10:10:00",
    "heureFin":"23:59:00"
    },
    {
    "nomBatch":"PAIEMENT",
    "lesFichiersEntrees":[],
    "lesFichiersSorties":
                        [
                            {
                            "nom":"DBL"
                            },
                            {
                            "nom":"PA"
                            },
                            {
                            "nom":"EP"
                            },
                            {
                            "nom":"PP"
                            },
                            {
                            "nom":"PB"
                            },
                            {
                            "nom":"EB"
                            }
                        ],
    "lesPredecesseurs":
                      [
                        {
                        "nomBatch":"STL_A_SAUVINCREM"
                        },
                        {
                        "nomBatch":"DGE_FACTURES"
                        },
                        {
                        "nomBatch":"FACTURES"
                        }
                      ],
    "lesSuccesseurs":
                    [
                        {
                        "nomBatch":"CODES_POSTAUX"
                        },
                        {
                        "nomBatch":"TABANK"
                        }
                    ],
    "heureDebut":"00:15:00",
    "heureFin":"03:15:00"
    },
    {
    "nomBatch":"CODES_POSTAUX",
    "lesFichiersEntrees":
                        [
                            {
                            "nom":"psa_cficpt.txt"
                            }
                        ],
    "lesFichiersSorties":[],
    "lesPredecesseurs":
                      [
                        {
                        "nomBatch":"PAIEMENT"
                        },
                        {
                        "nomBatch":"ADHESION"
                        }
                      ],
    "lesSuccesseurs":
                    [
                        {
                        "nomBatch":""
                        }
                    ],
    "heureDebut":"10:00:00",
    "heureFin":"23:59:00"
    },
    {
    "nomBatch":"ADHESION",
    "lesFichiersEntrees":[],
    "lesFichiersSorties":[],
    "lesPredecesseurs":
                      [
                        {
                        "nomBatch":""
                        }
                      ],
    "lesSuccesseurs":
                    [
                        {
                        "nomBatch":"CODES_POSTAUX"
                        }
                    ],
    "heureDebut":"00:30:00",
    "heureFin":"04:30:00"
    }
    ]

pour l'instant je ne travaille qu'avec 4 données pour le diagramme.

en suite dans le code JS je parcours ce fichier JSON pour alimenter une liste :

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
 
function createXHR()  {
	var request = false;
	try {
		request = new ActiveXObject('Msxml2.XMLHTTP');
	}
	catch (err2) {
		try {
			request = new ActiveXObject('Microsoft.XMLHTTP');
		}
		catch (err3) {
			try {
				request = new XMLHttpRequest();
			}
			catch (err1) 
			{
				request = false;
			}
		}
	}
	return request;
}
 
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({ 
						task : objBatch.nomBatch,
						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);
}

et un peu plus loin je parcours la liste "listeTachesBatch" pour alimenter la liste "taskArray" :

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
 
var taskArray = [];
 
		listeTachesBatch.forEach(function(element) {
 
			console.log(element.arraySuc.length);
			taskArray.push({
				id: element.task,
				task: element.task,
				type: element.task,
				startTime: element.startTime, //year/month/day
				endTime: element.endTime,
				details: "This actually didn't take any conceptualization",
				dependsOn: element.arraySuc,
				predecessor: element.predecessor,
				successor: element.successor,
				entryFiles: element.entryFiles,
				outputFiles: element.outputFiles,
				x:0,
				y:0,
				width:0,
				height:0
			});
 
		});

1 pièce(s) jointe(s)

j'ai réussi à adapter votre code pour mon cas :
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 var taskArray = []; listeTachesBatch.forEach(function(element) { console.log(element.arraySuc.length); taskArray.push({ id: element.task, task: element.task, type: element.task, startTime: element.startTime, //year/month/day endTime: element.endTime, details: "This actually didn't take any conceptualization", dependsOn: [], originOn: element.arraySuc, predecessor: element.predecessor, successor: element.successor, entryFiles: element.entryFiles, outputFiles: element.outputFiles, parentOn: true, childOn: true, x:0, y:0, width:0, height:0 });
en faite j'utilise toujours originOn pour alimenter les dépendances successeurs. et dependsOn ne contient jamais quelque chose, dependsOn est toujours vide.
je viens de tester et ça marche parfaitement.
je tiens à vous remercier de votre aide et votre travail.... :bravo::merci:

je vous mets en pièce jointe le résultat :
Pièce jointe 329258

dite moi si je dois mieux adapter quelque chose. je mettrai ce topic résolu après votre réponse.
merci encore :merci:

22/11/2017, 09h43
headmax

J'ai vu le topic et je me suis dit il faudrait que je le laisse réfléchir ;) et finalement tu t'en sort tout seul comme je l'avais imaginé, content pour toi, j'espère que tu aura un bon retour ;). pour les childOn parentOn je répète c'est pour les information pour les toolstips :), bonne continuation, fermeture du topic. Bien à toi.
22/11/2017, 09h52
Mr.Robot12

:mrgreen: j'ai galéré mais c'est grâce à vous que j'ai un bon résultat donc merci :merci:

Voir 40 message(s) de cette discussion en une page