Discussion :

[headmax]

C'est ce que j'ai implémenté dans le code les DPTA et DPTO il n'y as pas de durée il suffit de paramétrer comme tu l'a dit les DPTO = startDate et DPTA = endDate. Pour la fin des tâches elles se termineront quoi qu'il arrive à la fin de la journée c'est une constante d'ou le fait que mettre tout les task allant vers les 24h00. J'avais aussi parlé de durée moyenne d'une tache celle ci additionnée à la (DPTA - DPTO) donne la durée moyenne de la fin de la tâche.

[Mr.Robot12]

bonjour,
alors j'ai testé votre code et j'ai essayé de l'adapter pour moi, j'ai modifié la tâche "sketch" pour qu'elle commence avant "conceptualize" pour voir le rendu de la flèche car pour moi la flèche ira le plus souvent vers l'arrière mais j'en aurai certains qui iront vers l'avant également.

voilà ce que ça donne :


j'ai essayé de modifier la flèche pour avoir ce-ci pour que la flèche ne coupe pas le rectangle :

mais je n'arrive pas à avoir le résultat que je voudrais.
pouvez-vous m'aider svp

[Mr.Robot12]

je viens de voir un autre problème :


le tag qui affiche les détails d'une tâche est toujours en haut à gauche. j'ai regardé dans le code s'il manque quelque chose mais le code concernant le tag est exactement comme avant.
est-ce que vous savez d'où vient le problème ?

[Mr.Robot12]

j'ai fais ce-ci mais ça ne marche pas bien :

comme vous le voyez ça ne marche pas pour tous.
voici le 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
 
  var path = paths.selectAll('path')
    .data(data)
    .enter()
    .append('svg:path')
      .attr('d', function(d,i){ return 'M ' + x  + ', ' + (y) + ' h+50 v'+ (y2 - y-10) + ' L ' + (x2-20) + ' ' + (y2-10)+ ' v' +(y2 - y-13)+ ' h+15' })
      .attr('stroke', "black")
      .attr('stroke-width', 2)
      .attr('stroke-linecap', 'round')
      /*.attr('marker-start', function(d,i){ return 'url(#marker_' + d.name + ')' })*/
      .attr('marker-end', function(d,i){ return 'url(#marker_' + d.name  + ')' }).on('mouseover', function(e) { 
    this.style.stroke = "#CCCCCC"
})

j'ai juste modifié l'attribut "d".

[Mr.Robot12]

j'ai trouvé une solution pour la flèche mais il reste toujours le problème du tag affichant les détails. dites-moi si c'est bon où faut-il faire autrement :

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
 
  var path = paths.selectAll('path')
    .data(data)
    .enter()
    .append('svg:path')
      .attr('d', function(d,i){ return 'M ' + x  + ', ' + (y+03) + ' h+10 v'+ (y2 - y-13) + ' L ' + (x2-20) + ' ' + (y2-10)+ ' v+13'+ ' h+15'   })
      .attr('stroke', "black")
      .attr('stroke-width', 2)
      .attr('stroke-linecap', 'round')
      /*.attr('marker-start', function(d,i){ return 'url(#marker_' + d.name + ')' })*/
      .attr('marker-end', function(d,i){ return 'url(#marker_' + d.name  + ')' }).on('mouseover', function(e) { 
    this.style.stroke = "#CCCCCC"
}).on('mouseout', function(){
this.style.stroke = "black";
});

[Mr.Robot12]

je viens de m'apercevoir d'un autre problème
j'ai changé la flèche dans mon cas et je m'aperçois un problème.

comme vous le voyez les flèches marchent. en faite je ne peux pas faire afficher le tag pour la tâche FACTURES. quand je met la souris sur cette tâche c'est la flèche qui devient gris:

désolé pour la qualité de cette image, comme vous voyez la souris est sur FACTURES mais le tag ne s'affiche pas.
de plus sur les autres tâches quand je passe la souris dessus la souris devient un I parce qu'on passe la souris par dessus des lettres alors que sur cette tâche elle ne le fait pas(on le voit sur l'image). est-ce que c'est parce que la flèche entoure presque entièrement la tâche ?
pour l'instant il n'y a que pour cette tâche là qu'il y a ce problème mais quand j'aurai alimenté avec toutes les données il pourrai y avoir d'autres.
est-ce que vous pouvez m'aider svp?
en plus mon tuteur veut faire un point demain du coup il faut que ça marche avant.

PS. le positionnement du tag n'est toujours pas résolu

[Mr.Robot12]

comment je pourrai avoir ça au lieu de ce qu'il y a pour l'instant?

parce que comme ça va régler le problème de la flèche déjà.
j'ai mis 2 couleurs pour qu'on voit bien les 2 flèches, mais dans le graph la couleur sera noir

[Mr.Robot12]

j'ai mis plus de données et ça devient totalement illisible.


avec l'autre modèle (les 2 entourés en rouge je ne peux pas afficher le tag):

svp aidez-moi pour arranger les flèches comme dans mon dessin du message juste avant

[Mr.Robot12]

j'ai une autre idée.
au lieu d'afficher les liens de dépendances de toutes les tâches comme maintenant est-ce que c'est possible ce-ci : quand la souris passe par dessus une tâche on affiche seulement les dépendances de cette tâche c'est-à-dire tous les liens depuis ses prédécesseurs et tous les liens vers ses prédécesseurs.
je me suis dit que ce serai peut être un peu plus simple mais là j'ai des doutes, et en plus j'ai absolument aucune idée de comment faire que ce soit pour cette idée ou l'autre (afficher les liens de dépendances de toutes les tâches)

j'ai vraiment besoin de votre aide là, j'ai passé toute la journée à essayer de régler les flèches mais j'ai pas réussi.
et j'ai pas envie de me taper une mauvaise note à cause de ce projet donc svp aidez-moi, je veux juste faire le mieux possible. il faut juste régler ce problème de flèches.
je ne veux pas forcément cette idée là, je veux juste avoir un joli graph lisible avec des liens de dépendances où je peux afficher les tag pour chaque tâche

[NoSmoking]

Bonjour,
je te rassure tout de suite, je n'ai pas repris l'entièreté de la discussion et de tes codes.

Je vais juste m'arrêter sur la représentation/position des flèches.

Shéma de principe

Initialisation

Code :

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

1
2
3
4
5
6
7
8
9
10
11
decalX = 20;    // par exemple
ancre_depart = {
  'x': obj_depart.right,
  'y': obj_depart.top + obj_depart.height / 2
}
ancre_arrivee = {
  'x': obj_arrivee.left,
  'y': obj_arrivee.top + obj_arrivee.height / 2
}
hauteur_fleche = ancre_arrivee.y - ancre_depart.y;
largeur_fleche = (ancre_depart.x - ancre_arrivee.x) + (decalX * 2);

Déplacement

à partir de ancre_depart :
(0)→(1) moveToX ✚ decalX
(1)→(2) moveToY ✚ hauteur_fleche /2
(2)→(3) moveToX ⚊ largeur_fleche
(3)→(4) moveToY ✚ hauteur_fleche /2
(4)→(5) moveToX ✚ decalX

Sûrement quelques ajustements à faire mais le principal est là !

[Mr.Robot12]

la flèche que j'ai faite n'est pas déjà comme ça ?
je suis désolé mais j'ai vraiment du mal à comprendre

[NoSmoking]

Je ne faisais que répondre à :

comment je pourrai avoir ça au lieu de ce qu'il y a pour l'instant?

j'ai mis plus de données et ça devient totalement illisible.

En gros si ton problème est autre merci de le préciser plus clairement !

[Mr.Robot12]

en faite le problème c'est quand le successeur se situe au dessus du parent. quand le successeur est en dessous du parent la flèche est bonne.

voilà le résultat quand le successeur est au dessus du parent :

le problème dans ça c'est que la flèche entoure presque entièrement la tâche successeur et du coup je ne peux plus afficher le tag.

ce que je voudrais :

la flèche en noir c'est bon ça marche déjà, ce que je voudrais c'est avoir la flèche en rouge en plus de la flèche noir.
ça fait des jours que j'essaie de régler ça et je ne suis toujours pas arrivé, quand je tentais de corriger plus rien ne marchais du coup je suis revenu à l'état d'avant. je suis vraiment désespéré au point où j'en suis donc si vous pouviez m'aider pour ce problème ce serai vraiment génial ...

[headmax]

Nouveau rendu :




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

[Mr.Robot12]

Nouveau rendu :

merci infiniment. je viens de regarder comment vous avez fait et j'aurai jamais trouvé par moi-même

je vais l'adapter pour mon cas, j'espère que j'aurai pas de problème. je pense pas.
je vous tiens au courant.

[Mr.Robot12]

je comprends plus rien

pourquoi ça ne marche pas pour moi
j'ai juste changé les données du graph, qu'est-ce que j'ai fais de mal

[NoSmoking]

Pour répondre à

en faite le problème c'est quand le successeur se situe au dessus du parent.

tu n'as donc pas du utiliser, ou mal implémenté, l'algo que je t'ai proposé.

• Exemple de ce que j'obtiens en l'appliquant

• Fichier test de la mise en oeuvre, ce n'est pas du SVG et c'est juste pour voir

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trace-relation</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
  font: 1em/1.25 Verdana;
}
h1, h2, h3 {
  color: #069;
}
header, section {
  position: relative;
  margin: auto;
  max-width: 60em;
}
.case {
  display: flex;
  z-index: 1;
  position: absolute;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 15em;
  height: 100%;
  min-height: 48px;
  font-size: .8em;
}
.case-bleu {
  border: 1px solid #ABC;
  background: #CDE;
}
.case-rouge {
  border: 1px solid #CAB;
  background: #ECD;
}
.case-vert {
  border: 1px solid #BCA;
  background: #DEC;
}
.case:hover {
  z-index: 100;
  box-shadow: 0 0 5px #880;
  cursor: pointer;
}
#depart_1 {
  top: 160px;
  left: 200px;
}
#arrivee_1 {
  top: 80px;
  left: 160px;
}
#arrivee_2 {
  top: 300px;
  left: 240px;
}
#depart_2 {
  top: 240px;
  left: 240px;
  width: 8em;
}
#arrivee_3 {
  top: 316px;
  left: 500px;
  height: 6em;
}
</style>
</head>
<body>
  <header>
    <h1>Trace relations</h1>
  </header>
  <section id="relation">
    <div id="arrivee_3" class="case-vert case">Arrivée #3</div>
    <div id="depart_1" class="case-bleu case">Départ #1</div>
    <div id="arrivee_1" class="case-rouge case">Arrivée #1</div>
    <div id="depart_2" class="case-bleu case">Départ #2</div>
    <div id="arrivee_2" class="case-rouge case">Arrivée #2</div>
  </section>
 
<script>
/**
 *
 */
function createTrait(color, vert) {
  var oElem = document.createElement('DIV');
  var oStyle = oElem.style;
  oElem.className = 'trait';
  oStyle.boxSizing = 'border-box';
  oStyle.position = 'absolute';
  oStyle.borderColor = color;
  oStyle.borderStyle = 'solid';
  oStyle.borderWidth = '0';  
  if (vert) {
    oStyle.width = 0;
    oStyle.borderLeftWidth = '1px';
  }
  else {
    oStyle.height = 0;
    oStyle.borderTopWidth = '1px';
  }
  return oElem;
}
/**
 *
 */
function moveToX(left, top, width, color) {
  var oTrait = createTrait(color);
  var oStyle = oTrait.style;
  var posX = left + width;
  if (width < 0) {
    left = left + width;
    width *= -1;
    posX = left;
  }
  oStyle.left = left + 'px';
  oStyle.top = top + 'px';
  oStyle.width = (width+1) + 'px';
  document.body.appendChild(oTrait);
 
  return {
    'x': posX,
    'y': top,
    'elem' : oTrait
  };
}
/**
 *
 */
function moveToY(left, top, height, color) {
  var oTrait = createTrait(color, 1);
  var oStyle = oTrait.style;
  var posY = top + height;
  if (height < 0) {
    top = top + height;
    height *= -1;
    posY = top;
  }
  oStyle.left = left + 'px';
  oStyle.top = top + 'px';
  oStyle.height = (height+1) + 'px';
  document.body.appendChild(oTrait);
 
  return {
    'x': left,
    'y': posY,
    'elem' : oTrait    
  };
}
/**
 *
 */
function drawFleche(posx, posy, color) {
  var oElem = document.createElement('DIV');
  var oStyle = oElem.style;  
  var w = 12;
  var w_2 = w / 2;
  oStyle.position = 'absolute';
  oStyle.left = posx + 'px';
  oStyle.top = posy + 'px';
  oStyle.width = 0;
  oStyle.height = 0;
  oStyle.borderStyle = 'solid';
  oStyle.borderWidth = w_2 + 'px 0 ' + w_2 + 'px ' + w + 'px';
  oStyle.borderColor = 'transparent transparent transparent ' + color;
  oStyle.transform = 'translate( -100%, -50%)';
  document.body.appendChild(oElem);
  return oElem;
}
/**
 *
 */
function drawPoint(posx, posy, color) {
  var oElem = document.createElement('DIV');
  var oStyle = oElem.style;
  var w = 4;
  oElem.className ='point';
  oStyle.position = 'absolute';
  oStyle.left = posx + 'px';
  oStyle.top = posy + 'px';
  oStyle.width = 0;
  oStyle.height = 0;
  oStyle.borderStyle = 'solid';
  oStyle.borderRadius = '50%';  
  oStyle.borderWidth =  w + 'px';
  oStyle.borderColor = color;
  oStyle.zIndex = 10;
  oStyle.transform = 'translate( -50%, -50%)';
  document.body.appendChild(oElem);
  return oElem;
}
/**
 *
 */
function traceLiaison(depart, arrivee, color) {
  // initialisation
  color = color || '#000';
  var oDepart = document.getElementById(depart);
  var oArrivee = document.getElementById(arrivee);
  var obj_depart = oDepart.getBoundingClientRect();
  var obj_arrivee = oArrivee.getBoundingClientRect();
  // calcul déplacement
  var decalX = 20;
  var ancre_depart = {
    'x': obj_depart.right,
    'y': obj_depart.top + obj_depart.height / 2
  };
  var ancre_arrivee = {
    'x': obj_arrivee.left,
    'y': obj_arrivee.top + obj_arrivee.height / 2
  };
  var hauteur_fleche = ancre_arrivee.y - ancre_depart.y;
  var largeur_fleche = (ancre_depart.x - ancre_arrivee.x) + (decalX * 2);
 
  // deplacement
  var pos = {
    'x': ancre_depart.x,
    'y': ancre_depart.y
  };
  drawPoint(pos.x, pos.y, color);
  pos = moveToX(pos.x, pos.y, decalX, color);
  pos = moveToY(pos.x, pos.y, hauteur_fleche / 2, color);
  pos = moveToX(pos.x, pos.y, - largeur_fleche, color);
  pos = moveToY(pos.x, pos.y, hauteur_fleche / 2, color);
  pos = moveToX(pos.x, pos.y, decalX, color);
  drawFleche( pos.x, pos.y, color);
}
// début du tracé
traceLiaison('arrivee_3','arrivee_1', '#069');
traceLiaison('depart_1','arrivee_1', '#069');
traceLiaison('depart_2','arrivee_2', '#069');
traceLiaison('arrivee_2','arrivee_3', '#069');
traceLiaison('depart_1','arrivee_3', '#069');
</script>
</body>
</html>

[Mr.Robot12]

Pour répondre à
tu n'as donc pas du utiliser, ou mal implémenté, l'algo que je t'ai proposé.

• Exemple de ce que j'obtiens en l'appliquant

• Fichier test de la mise en oeuvre, ce n'est pas du SVG et c'est juste pour voir

est-ce que du coup ça peut marcher pour mon cas ? en SVG du coup ?
je veux comprendre mais je suis désolé j'ai du mal avec mon niveau de novice, je ne vois pas comment et où je peux mettre ce code dans mon js

[headmax]

Tout d'abord il serait plus que justifié de mettre ton code ta version fonctionnelle de ce que tu as fait, as tu bien respecté les données JSON tel que l'exemple le montre as tu changé quelque chose peu tu me montrer les données du vrai json que tu as utilisé version soft.
Car sans code je ne peux pas faire de magie, tu bosse bien dans le développement?
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

Rappel il faut mettre comme je l'ai fait pas de end comme tu le souhaitait, juste une heure au plus tôt, et une au plus tard, je pense qu'un json mal configuré dans les dates peut faire ce genre de rendu.

regarde bien mon json : j'ai mit volontairement une heure au plus tard pour qu'on puisse avoir un texte au milieu du rectangle car on est dans une timeline donc juste pour faire jolie ... Je n'utilise plus starttime et endtime puisqu'on a rajouté le critère heure au plus tôt donc j'ai fait l'heure au plus tard sinon il y avait pas de logique a y mettre que l'heure au plus tôt sachant que dans la réalité il me semble qu'il y a les deux.

J'ai suivit tes critères un successeur qui devient prédécesseur dans la tâche, les catégories de tâches, les inter dépendances entre divers catégories, des tâches dépendantes dans la timeline ayant des successeurs avancé dans le temps ou en retard ... etc

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
 
{
    id: "m01",
    task: "conceptualize",
    type: "development",
    debutPlusTot:"00:00",
    debutPlusTard:"07:00",
    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: "m02",
    task: "sketch",
    type: "development",
    debutPlusTot:"10:10",
    debutPlusTard:"12:10",
    startTime: "00:00",
    endTime: "00:00",
    details: "No sketching either, really",
    dependsOn: ['m01'],
    originOn: ['m07'],  
    parentOn: true,
    childOn: true,
    x:0,
    y:0,
    width:0,
    height:0
 
},

[Mr.Robot12]

merci pour votre réponse headmax.
oui je suis dans le développement
demain je vais retenter j'ai dû louper quelque chose. et je vous mettrai le code js et mon fichier json