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

**Mr.Robot12** · 09/11/2017, 11h54

Bonjour
je viens vers vous car j'ai besoin d'aide et c'est très urgent. mon tuteur de stage m'a demandé de créer une appli web("une sorte de wiki") contenant les informations des batchs d'une autre application.
j'ai une page JSP avec un diagramme de gantt mais je ne sais pas comment ajouter les dépendances entre les différentes taches. je suis nouveau dans le monde de développeur donc je me suis basé sur un exemple.

voici le

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
 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="<c:url value="./assets/css/style.css"/>" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div class="container">
        <div class="row" id="gantt">
            <div class=".col-xs-6 .col-sm-4">
                <div id="containerSVG">
                    <div class="svg"></div>
                    <div id="tag"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

voici le

Code CSS :

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
 
 
    * {
      margin: 0;
      padding: 0;
  }
  body {
      background: #fff;
      font-family: 'Open-Sans',sans-serif;
 
  }
 
#containerSVG{
  margin: 0 auto;
  position: relative;
  /*width:800px;*/
  overflow: visible;
}
 
 
  .svg {
    /*width:800px;
    height:400px;*/
    overflow: visible;
    position:absolute;
}
 
.grid .tick {
    stroke: lightgrey;
    opacity: 0.3;
    shape-rendering: crispEdges;
}
.grid path {
      stroke-width: 0;
}
 
 
#tag {
  color: white;
  background: #FA283D;
  width: 175px;
  position: absolute;
  display: none;
  padding:3px 6px;
  margin-left: -80px;
  font-size: 11px;
}
 
 
 
#tag:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  width: 0;
  border-width: 10px;
  border-bottom-color: #FA283D;
  top: -20px;
}

voici le code JS qui produit le Gantt avec un exemple de tableau de taches pour alimenter le diagramme :

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
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
 
$(window).load(function () {
		var w = 1100;
		var h = 400;
 
		var svg = d3.selectAll(".svg")
		//.selectAll("svg")
		.append("svg")
		.attr("width", w)
		.attr("height", h)
		.attr("class", "svg");
 
 
                 var taskArray = [
                         {
                              task: "PO0",
                              type: "Machine0",
                              startTime: "00:00:00", //hour:minute:second
                              endTime: 10:00:00,
                              successor: "PO1"
                         },
 
                         {
                              task: "PO1",
                              type: "Machine1",
                              startTime: "11:00:00", //hour:minute:second
                              endTime: 14:00:00,
                              successor: "PO2",
                              predecessor: "PO0"
                         },
 
                         {
                               task: "PO2",
                               type: "Machine2",
                               startTime: "15:00:00", //hour:minute:second
                               endTime: 19:00:00,
                               successor: "PO3"
                          },
 
                          {
                               task: "PO3",
                               type: "Machine3",
                               startTime: "00:00:00", //hour:minute:second
                               endTime: 08:00:00,
                               predecessor: "PO2"
                          },
                 ];	
 
		var timeFormat = d3.time.format("%H:%M:%S");
 
		var timeScale = d3.time.scale()
		.domain([d3.min(taskArray, function(d) {return  timeFormat.parse(d.startTime);}),
		         d3.max(taskArray, function(d) {return timeFormat.parse(d.endTime);})])
		         .range([0,w-100]);
 
 
 
		var categories = new Array();
		var pos = new Array();
 
		for (var i = 0; i < taskArray.length; i++){
			categories.push(taskArray[i].type);
		}
 
		for (var i = 0; i < taskArray.length; i++){
			pos.push(taskArray[i].task);
		}
 
		var catsUnfiltered = categories; //for vert labels
 
 
		categories = checkUnique(categories);
 
		pos = checkUnique(pos);
 
 
		makeGant(taskArray,categories, w, h);
 
		function makeGant(tasks,categories, pageWidth, pageHeight){
 
			var barHeight = 20;
			var gap = barHeight + 4;
			var topPadding = 5;
			var sidePadding = 75;
 
			var colorScale = d3.scale.linear()
			.domain([0, categories.length])
			.range(["#00B9FA", "#F95002"])
			.interpolate(d3.interpolateHcl);
 
			makeGrid(sidePadding, topPadding, pageWidth, pageHeight);
			drawRects(tasks, categories,gap, topPadding, sidePadding, barHeight, colorScale, pageWidth, pageHeight);
			//vertLabels(gap, topPadding, sidePadding, barHeight, colorScale);
		}
 
		//methode pour alimenter le contenu du diagramme
		function drawRects(theArray,theCategories, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w, h){
 
			var rectangles = svg.append('g')
			.selectAll("rect")
			.data(theArray)
			.enter();
 
			var innerRects = rectangles.append("rect")
			.attr("rx", 3)
			.attr("ry", 3)
			.attr("x", function(d){
				return timeScale(timeFormat.parse(d.startTime)) + theSidePad;
			})
			.attr("y", function(d, i){
				for (var j = 0; j < categories.length; j++){
					if (d.type == categories[j]){
						return j*(theGap) + theTopPad+24;
					}
				}
			})
			.attr("width", function(d){
				return (timeScale(timeFormat.parse(d.endTime))-timeScale(timeFormat.parse(d.startTime)));
			})
			.attr("height", theBarHeight)
			.attr("stroke", "none")
			.attr("fill", function(d){
				for (var i = 0; i < pos.length; i++){
					if (d.task == pos[i]){
						return d3.rgb(theColorScale(i));
					}
				}
			});
 
			var rectText = rectangles.append("text")
			.text(function(d){
				return d.task;
			})
			.attr("x", function(d){
				return (timeScale(timeFormat.parse(d.endTime))-timeScale(timeFormat.parse(d.startTime)))/2 + timeScale(timeFormat.parse(d.startTime)) + theSidePad;
			})
			.attr("y", function(d, i){
				for (var j = 0; j < categories.length; j++){
					if (d.type == categories[j]){
						alert(j*(theGap) +19+ theTopPad+19);
						return j*(theGap) +19+ theTopPad+19;
					}
				}
			})
			.attr("font-size", 11)
			.attr("text-anchor", "middle")
			.attr("text-height", theBarHeight)
			.attr("fill", "#fff");
 
			rectText.on('mouseover', function(e) {
				// console.log(this.x.animVal.getItem(this));
				var tag = "";
 
				tag = "Batch: " + d3.select(this).data()[0].task + "<br/>" + 
					/*"Type: " + d3.select(this).data()[0].type + "<br/>" + */
					"Début: " + d3.select(this).data()[0].startTime + "<br/>" + 
					"Fin: " + d3.select(this).data()[0].endTime + "<br/>" +
					"Successeurs: " + d3.select(this).data()[0].successor + "<br/>" + 
					"Prédécesseurs: " + d3.select(this).data()[0].predecessor + "<br/>" +
					"Fichiers d'entrées: " + d3.select(this).data()[0].entryFiles + "<br/>" + 
					"Fichiers de sorties: " + d3.select(this).data()[0].outputFiles;
 
				var output = document.getElementById("tag");
 
				var x = this.x.animVal.getItem(this) + "px";
				var y = this.y.animVal.getItem(this) + 50 + "px";
 
				output.innerHTML = tag;
				output.style.top = y;
				output.style.left = x;
				output.style.display = "block";
			}).on('mouseout', function() {
				var output = document.getElementById("tag");
				output.style.display = "none";
			});
 
			innerRects.on('mouseover', function(e) {
				//console.log(this);
				var tag = "";
				tag = "Batch: " + d3.select(this).data()[0].task + "<br/>" + 
					/*"Type: " + d3.select(this).data()[0].type + "<br/>" + */
					"Début: " + d3.select(this).data()[0].startTime + "<br/>" + 
					"Fin: " + d3.select(this).data()[0].endTime + "<br/>" +
					"Successeurs: " + d3.select(this).data()[0].successor + "<br/>" + 
					"Prédécesseurs: " + d3.select(this).data()[0].predecessor + "<br/>" +
					"Fichiers d'entrées: " + d3.select(this).data()[0].entryFiles + "<br/>" + 
					"Fichiers de sorties: " + d3.select(this).data()[0].outputFiles;
 
				var output = document.getElementById("tag");
 
				var x = (this.x.animVal.value + this.width.animVal.value/2) + "px";
				var y = this.y.animVal.value + 50 + "px";
 
				output.innerHTML = tag;
				output.style.top = y;
				output.style.left = x;
				output.style.display = "block";
			}).on('mouseout', function() {
				var output = document.getElementById("tag");
				output.style.display = "none";
 
			});
		}
 
		//methode pour afficher les axes
		function makeGrid(theSidePad, theTopPad, w, h){
 
			var xAxis = d3.svg.axis()
		    .scale(timeScale)
		    .orient('bottom')
		    .ticks(d3.time.hours, 1)
		    .tickSize(-h+theTopPad+20, 0, 0)
		    .tickFormat(d3.time.format('%H:%M'));
 
		var grid = svg.append('g')
		    .attr('class', 'grid')
		    .attr('transform', 'translate(' +theSidePad + ', ' + (h - 50) + ')')
		    .call(xAxis)
		    .selectAll("text")  
		            .style("text-anchor", "middle")
		            .attr("fill", "#000")
		            .attr("stroke", "none")
		            .attr("font-size", 12)
		            .attr("dy", "1em");
		}
 
		function vertLabels(theGap, theTopPad, theSidePad, theBarHeight, theColorScale){
			var numOccurances = new Array();
			var prevGap = 0;
 
			for (var i = 0; i < categories.length; i++){
				numOccurances[i] = [categories[i], getCount(categories[i], catsUnfiltered)];
			}
 
			var axisText = svg.append("g") //without doing this, impossible to put grid lines behind text
			.selectAll("text")
			.data(numOccurances)
			.enter()
			.append("text")
			.text(function(d){
				return d[0];
			})
			.attr("x", 10)
			.attr("y", function(d, i){
				return d[1]*theGap/2 + i*(theGap+30)+ theTopPad;
 
			})
			.attr("font-size", 11)
			.attr("text-anchor", "start")
			.attr("text-height", 14)
			.attr("fill", function(d){
				for (var i = 0; i < categories.length; i++){
					if (d[0] == categories[i]){
						//  console.log("true!");
						return d3.rgb(theColorScale(i)).darker();
					}
				}
			});
 
		}
 
		function checkUnique(arr) {
			var hash = {}, result = [];
			for ( var i = 0, l = arr.length; i < l; ++i ) {
				if ( !hash.hasOwnProperty(arr[i]) ) {
					hash[ arr[i] ] = true;
					result.push(arr[i]);
				}
			}
			return result;
		}
 
		function getCounts(arr) {
			var i = arr.length, // var to loop over
			obj = {}; // obj to store results
			while (i) obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences
			return obj;
		}
 
		// get specific from everything
		function getCount(word, arr) {
			return getCounts(arr)[word] || 0;
		}
	}, 100);
});

SVP aidez moi

**headmax** · 09/11/2017, 22h25

Salut, peux tu juste montrer les datas json que tu utilises si c'est pas trop long sinon la structure afin de voir si tu respect bien la syntaxe json qu'a besoin d3.js pour fonctionner, car sans ça on est dans le brouillard.
Bien à toi.

**Mr.Robot12** · 10/11/2017, 08h35

Merci pour votre réponse,
j'ai une structure comme celle ci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
                      var taskArray = [
					{
						task: "(le nom du batch)",
						type: "(j'ai gardé le nom du batch pour le type également)",
						startTime: "(l'heure de début du batch)", //hour:minute:second
						endTime: "(l'heure de fin du batch)",
						predecessor: "(son ou ses prédécesseurs; dans le cas de plusieurs prédécesseurs ils sont séparés par des virgules)",
						successor: "(son ou ses successeurs; dans le cas de plusieurs successeurs ils sont séparés par des virgules)",
						entryFiles: "(son ou ses fichiers d'entrées; dans le cas de plusieurs fichiers ils sont séparés par des virgules)",
						outputFiles: "(son ou ses fichiers de sortie; dans le cas de plusieurs fichiers ils sont séparés par des virgules)"
					},
                      ];

par exemple si on prend les batchs qui s'appelle "PAIEMENT" et "ADHESION" :

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
                         var taskArray = [
					{
						task: "PAIEMENT",
						type: "PAIEMENT",
						startTime: "00:15:00", //hour:minute:second
						endTime: "03:15:00",
						predecessor: "DGE_FACTURES, STL_A_SAUVINCREM, FACTURES",
						successor: "",
						entryFiles: "",
						outputFiles: "PA, EB, EP, PB, PP, DBL"
					},
					{
						task: "ADHESION",
						type: "ADHESION",
						startTime: "00:30:00", //hour:minute:second
						endTime: "04:30:00",
						predecessor: "",
						successor: "GAIA, ETAT_BASE",
						entryFiles: "",
						outputFiles: ""
					},
                      ];

Je vous met une capture d’écran du gantt que j'ai avec cette structure :

Pièce jointe 326155 Nom : Capture.PNG
Affichages : 411
Taille : 19,6 Ko

**Mr.Robot12** · 10/11/2017, 14h30

j'ai fais une petite bidouille mais elle ne marche pas complètement.
peut être c'est un début de solution ou alors c'est pas la bonne façon.

je vous communique ce que j'ai ajouté dans le code js, dites moi si c'est bon si'il faut l'enlever.

pour tester j'ai mis 2 successeurs pour le batch "PAIEMENT". ce sont "TABANK" et "CODES_POSTAUX"
et dans les batchs "TABANK" et "CODES_POSTAUX" j'ai mis comme prédécesseur le batch "PAIEMENT".

j'ai ajouter ce bout de code dans la fonction drawRects(theArray,theCategories, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w, h)

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
38
39
40
41
42
43
44
45
46
47
48
49
 
			var line ="";
			var x1 = "";
			var x2 = "";
			var y1 = "";
			var y2 = "";
 
			taskArray.forEach(function(element) {
				var lesSucs = element.successor.split(',');
				lesSucs.forEach(function(s) {
					taskArray.forEach(function(batchS) {  
						if(s != null && s != undefined && s.length !=0) {
							if(s == batchS.task && batchS.task!= element.task) {
								x2 = timeScale(timeFormat.parse(batchS.startTime)) + theSidePad;
								for (var j = 0; j < categories.length; j++){
									if (batchS.type == categories[j]){
										y2 = (j+1)*(theGap) + theTopPad + 10;
									}
								}
							}
						}
					});
				});
 
				var lesPreds = element.predecessor.split(',');
				lesPreds.forEach(function(p) {
					taskArray.forEach(function(batchP) {  
						if(p != null && p != undefined && p.length !=0) {
							if(p == batchP.task && batchP.task!= element.task) {
								x1 = timeScale(timeFormat.parse(batchP.endTime)) + theSidePad;
								for (var j = 0; j < categories.length; j++){
									if (batchP.type == categories[j]){
										y1 = (j+1)*(theGap) + theTopPad + 10;
									}
								}
							}
						}
					});
				});
			});
 
			line = rectangles.append("line")
			.attr("x1", x1)
			.attr("x2", x2)
			.attr("y1", y1)
			.attr("y2", y2)
			.attr("stroke", "orange")
			.attr("fill", "transparent")
			.attr("stroke-width", "3");

quand je lance le programme j'ai ça. normalement il devrait y avoir un lien de "PAIEMENT" vers "CODES_POSTAUX" et un autre de "PAIEMENT" vers "TABANK" mais il n'y a de lien que vers "CODES_POSTAUX". parfois quand je relance le programme je n'ai le lien vers "CODES_POSTAUX" mais il y a le lien vers "TABANK". en plus de ne pas afficher tous les liens il y a 4 balises <line> les uns sur les autres (je suppose que c'est parce que j'ai 4 batchs dans la data table JSON)

quand il y a un lien uniquement vers "CODES_POSTAUX" :

Nom : Capture.PNG
Affichages : 379
Taille : 29,6 Ko

Nom : Capture.PNG
Affichages : 379
Taille : 29,6 Ko

quand il y a un lien uniquement vers "TABANK" :

Nom : Capture2.PNG
Affichages : 504
Taille : 30,9 Ko

**headmax** · 10/11/2017, 15h16

Salut pour ce qui est des dépendances rien ne t’empêche de les créer tel que tu crée des attributs dans tes datas passée a d3.js et de dessiner les svg pour les flèches de dépendance http://bl.ocks.org/tomgp/d59de83f771ca2b6f1d4.

Si l'envie de ne pas trop y passer du temps tu peux toujours t'orienter sur une lib jquery qui fait déjà le boulot : j'ai un ancien exemple ici si sa peux t'aider : https://codepen.io/headmax/pen/YEZyaj

Bien à toi.

**Mr.Robot12** · 10/11/2017, 16h24

Dans votre exemple pouvez-vous me faire un exemple de la data table mais avec mes données ? je ne comprends pas où je dois changer car dans mon cas la durée est en heure:minute:seconde alors que dans le votre c'est en jour si j'ai bien compris. et est ce qu'il y a autres modifications à faire dans votre exemple pour la durée en heure:minute:seconde ?

dans mon cas la data table est rempli dynamiquement donc est-ce qu'il y aura des problèmes ?

**headmax** · 10/11/2017, 16h42

Oubli mon gantt j'ai testé est c'est pas adaptable simplement, par contre je te montre ici basé sur ton exemple comment faire les liens de dépendance dans le json et ensuite sur ton schéma de rendu.

https://codepen.io/headmax/pen/gXmPEw?editors=1111

**Mr.Robot12** · 15/11/2017, 08h09

Désolé de répondre après plusieurs jours de retard....
Je viens de regarder votre exemple et donc je tiens à vous remercier pour votre aide.

j'ai une question : est ce que c'est possible de définir nous même les dépendances et pas forcément la tâche qui est juste avant lui et surtout pas du même type ? parce que dans mon cas en faite j'ai des tâches avec plusieurs dépendances
j'ai essayé de mettre plusieurs dépendances dans votre exemple mais je n'ai pas réussi.

par exemple dans votre exemple j'ai essayé d'ajouter une dépendance pour la tâche "sketch" venant de "HTML" pour tester les dépendances multiples et pour voir si ça marche même si le type est différent. mais je n'ai pas réussi à avoir ce que je voulais.

quand je fais des tests j'ai l'impression que peu importe le nom de la dépendance qu'on met il ne sera pas pris en compte, j'ai l'impression qu'il fait un lien avec la tâche qui est juste avant et ce même quand on met pas son nom dans l'attribut dependsOn. càd si je fait dependsOn: [''] il y a un lien de dépendance avec la tâche précédente

Code :

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

1
2
3
4
 
dependsOn: [''] => il y a un lien de dépendance avec la précédente tâche
dependsOn: ['id d une tache qui n est pas la precedente '] => il y a un lien de dépendance avec la précédente tâche et non avec la tâche qui est voulue
dependsOn: [] => pas de dépendance

Donc j'attends l'aide de votre part car je ne sais pas comment m'y prendre pour avoir plusieurs dépendances et peu importe le type comme je l'ai dis plus haut. et je ne sais pas si j'ai mal testé votre gantt.

**headmax** · 15/11/2017, 16h28

j'ai une question : est ce que c'est possible de définir nous même les dépendances et pas forcément la tâche qui est juste avant lui et surtout pas du même type ? parce que dans mon cas en faite j'ai des tâches avec plusieurs dépendances

Pour ta question oui on peu créer nous même les dépendances : par exemple

ici lors de la création des lines svg je check les attributes des rects (nos tasks dans la timeline), j'ai moi même créé cette dépendances en ajoutant un attributes .attr dans mes rectangles après je check moi même cette dépendances afin de dessiner selon le contexte du json que tu m'a montré par contre si il y a plusieurs noeuds enfin faudrait que tu me montre un exemple concret pour que je puisse vraiment t'aider.

Code :

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

1
2
3
4
 
 if(rects[i].nextSibling.__data__.dependsOn[0] !== undefined){
 
}

**Mr.Robot12** · 15/11/2017, 19h06

par exemple imaginons que la tâche "color profiles" a comme dépendances : "m02", "m04", "m07"
et que la tâche "sketch" a comme dépendances : "m01", "m04", "m08"

comment on fait pour qu’il y ait autant de liens qu'il y a de dépendances en faite.

**headmax** · 16/11/2017, 22h16

Désolé pour le temps de réponse j'espère que tu t'en sort

, pour ta question selon mon script il faudra ordonner le json pour qu'il sort les datas de cette façon :

"color profiles" a comme dépendances : "m02", "m04", "m07"

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
{
    id: "m03",
    task: "color profiles",
    type: "development",
    startTime: "08:25",
    endTime: "24:00",
    dependsOn: [], //dependant de rien ou d'une task ... ici il est autonome 
    x:0,
    y:0,
    width:0,
    height:0
},
{
    id: "m02",
    task: "sketch",
    type: "development",
    startTime: "04:10",
    endTime: "06:25",
    details: "No sketching either, really",
    dependsOn: ['m03'], //m02 depend de m03
    x:0,
    y:0,
    width:0,
    height:0
 
},
{
 id: "m04",
 task: "HTML",
    type: "coding",
    startTime: "01:05",
    endTime: "03:30",
    details: "all three lines of it",
    dependsOn: ['m03'], //m04 depend de m03
    x:0,
    y:0,
    width:0,
    height:0
},
{
   id: "m07",
    task: "spam links",
    type: "promotion",
    startTime: "04:10",
    endTime: "07:23",
    dependsOn: ['m03'], //m07 depend de m03
    x:0,
    y:0,
    width:0,
    height:0
},

et que la tâche "sketch" a comme dépendances : "m01", "m04", "m08"

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
38
39
40
41
 
 
{
    id: "m02",
    task: "sketch",
    type: "development",
    startTime: "04:10",
    endTime: "06:25",
    details: "No sketching either, really",
    dependsOn: ['m03'], //m02 depend ou rien laisse vide
    x:0,
    y:0,
    width:0,
    height:0
 
},
{
 id: "m04",
 task: "HTML",
    type: "coding",
    startTime: "01:05",
    endTime: "03:30",
    details: "all three lines of it",
    dependsOn: ['m02'], //m04 depend de m02
    x:0,
    y:0,
    width:0,
    height:0
},
{
   id: "m08",
    task: "autres taks",
    type: "choix",
    startTime: "04:10",
    endTime: "07:23",
    dependsOn: ['m02'],
    x:0,
    y:0,
    width:0,
    height:0
},

**Mr.Robot12** · 16/11/2017, 23h39

merci pour votre réponse

est ce que c'est possible de relier toutes les dépendances d'une tâche directement à elle.
par exemple si on prends la tâche "color profiles", elle a comme dépendances : "m02", "m04", "m07". je voudrais savoir si ce serai possible en faite de relier directement ces 3 dépendances à la tâche "color profiles" et non relier "m02" à la tâche "color profiles" puis "m04" à "m02" puis "m07" à "m04".

ce que je voudrais c'est quelque chose comme ça en faite. dites moi si c'est possible
Nom : Sans titre.png
Affichages : 401
Taille : 6,3 Ko

Nom : Sans titre.png
Affichages : 401
Taille : 6,3 Ko

**headmax** · 17/11/2017, 00h14

Ok je vois ce que souhaite faire, laisse moi jusqu'à dimanche au grand max et j'adapterais le script pour que l'on puisse rajouter les dépendances par le biais du tableau passé par l'attribut "dependOn: []" ici je prend qu'une seule valeur, effectivement c'est pas possible en l'état du script j'avais imaginé un truc dans le genre d'ou la présence du [] mais je vais faire en sort que ça le soit. Merci pour c'est idée afin de l'améliorer.

**headmax** · 17/11/2017, 03h55

Voilà j'ai trouvé un peu de temps dans la nuit, j'ai donc comme j'ai dit au dessus pour le cas simple array length = 1 on est on mode nextsibling enfant de, dès qu'on passe en mode > 1 on est dans le cas de l'array ce qui change le comportement de l'attribut dependOn comme si devient parent de comme tu me la montré sur ton schéma, le json prendra cette forme :

cas Array (id devient parent de ...)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
{
    id: "m04",
    task: "HTML",
    type: "coding",
    startTime: "00:05",
    endTime: "03:30",
    details: "all three lines of it",
    dependsOn: ['m01', 'm06', 'm08'],
    x:0,
    y:0,
    width:0,
    height:0
}

cas nextsibling (array = 1) dépendant de ...

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
 
{
    id: "m02",
    task: "sketch",
    type: "development",
    startTime: "10:10",
    endTime: "14:25",
    details: "No sketching either, really",
    dependsOn: ['m01'],
    x:0,
    y:0,
    width:0,
    height:0
 
}

Nom : Capture d'écran de 2017-11-17 03-51-10.png
Affichages : 427
Taille : 88,1 Ko

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

**Mr.Robot12** · 17/11/2017, 08h32

Je viens de voir votre réponse et je vous remercie infiniment pour m'avoir aidé, c'est exactement ce que je voulais donc merci beaucoup.

Je vais faire mon maximum pour l'adapter dans mon cas et je vous recontacte si jamais je rencontre un problème.

j'aimerai juste poser une petite question si c'est pas trop demander depuis le début : dans le cas ou une tâche n'a pas de dépendances successeurs ou prédécesseurs est-ce que c'est possible de retirer les petits cercles qui sont au début et à la fin de la tâche ?

bien-sûr je suis reconnaissant pour votre aide et si vous pensez que ce n'est pas possible ce n'est pas grave.

en tout cas merci énormément

**Mr.Robot12** · 17/11/2017, 09h58

rebonjour,

quand j'ai voulu tester votre code sans rien changer j'ai eu une erreur qui disait que la variable 'polylineData' était introuvable. du coup j'ai regardé le code et j'ai vu que cette variable n'existe pas, donc j'ai pris cette partie depuis l'ancien exemple pour tester, mais j'avais toujours une page blanche. donc j'ai enlevé cette partie pour tester :

Code :

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

1
2
3
4
5
6
7
8
9
 
var lines = linesContainer
    .selectAll('polyline')
    .data(polylineData)
    .enter()
    .append('polyline')
    .style('fill', 'none')
    .style('stroke', d => d.color)
    .attr('points', d => d.points);

et quand j'ai relancé l'application tout fonctionne nickel avec tous les liens de dépendances comme dans votre capture d'écran. je ne sais pas ceci est dû à cause de quoi, en tout cas je voulais vous tenir au courant.

**headmax** · 17/11/2017, 14h02

Effectivement

il était tard hier soir, j'ai du faire un supprimer sans m'en rendre compte. pour ce qui est des cercles, je vais essayer d'arranger ça, si tu as un "forké" le projet il serait bien de me montrer ton lien afin que je me base dessus et d'être sure à 100% du rendu, tu peux maintenant comprendre que le json est strictement lié, au aléas de l'application.
Une autre idée me vient a l'esprit , j'ai rajouté l'event click sur les cercles afin d'afficher + d'information ... si ta besoin de mettre en œuvre ce type de détails, n'hésite.

Pour les cercles j'ai rajouté des conditions dans le json parentOn, childOn pour nos cercles si il a un parent on dessine le cercle, si il a un enfant idem.

cas du départ des tasks le principal parent

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
 
{
    id: "m04",
    task: "HTML",
    type: "coding",
    startTime: "00:05",
    endTime: "03:30",
    details: "all three lines of it",
    dependsOn: ['m01', 'm06', 'm08'],
    parentOn: true,
    childOn: false,
    x:0,
    y:0,
    width:0,
    height:0
}

pour une task qui a provient d'une autre (childOn === true) et qui est elle même parent d'autre task (parentOn === true)

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
 
{
     id: "m05",
    task: "write the JS",
    type: "coding",
    startTime: "06:30",
    endTime: "15:50",
    dependsOn: ['m04'],
    parentOn: false,
    childOn: true,
    x:0,
    y:0,
    width:0,
    height:0
}

Nom : Capture d'écran de 2017-11-17 15-06-01.png
Affichages : 420
Taille : 19,1 Ko

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

**Mr.Robot12** · 17/11/2017, 14h32

Envoyé par headmax

Effectivement

il était tard hier soir, j'ai du faire un supprimer sans m'en rendre compte. pour ce qui est des cercles, je vais essayer d'arranger ça, si tu as un "forké" le projet il serait bien de me montrer ton lien afin que je me base dessus et d'être sure à 100% du rendu, tu peux maintenant comprendre que le json est strictement lié, au aléas de l'application.

en faite j'ai copié le code pour essayer dans mon application web en java que je développe sur Eclipse. pour l'instant j'essaie d'avancer sans la partie que j'ai cité et j'ai toujours les liens donc tout va bien de ce côté là.

j'ai un petit problème en faite par contre. dans mon cas j'ai des tâches avec une seule dépendances successeur, or dans votre exemple si une tâche n'a qu'une seule dépendance elle est perçu comme un prédécesseur. est-ce que vous avez une idée svp de comment faire pour que ce soit toujours des dépendances successeurs (que ce soit une ou plusieurs pour une tâche) et non prédécesseurs quand il n'y a qu'une seule dépendance ?

en faite dans mon cas le taskArray est rempli automatiquement car je les extraie d'un fichier JSON externe qui est lui aussi créé dynamiquement. du coup je suis bloqué pour le problème que je viens de citer en faite.

j'espère que je vous en demande pas trop