IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé Avatar de Mr.Robot12
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2016
    Messages : 189
    Par défaut Afficher des flèches de dépendences dans le diagramme de Gantt D3.js
    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

  2. #2
    Membre Expert

    Homme Profil pro
    Ingénieur Hospitalier
    Inscrit en
    Juillet 2004
    Messages
    993
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur Hospitalier
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 993
    Billets dans le blog
    1
    Par défaut
    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.

  3. #3
    Membre confirmé Avatar de Mr.Robot12
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2016
    Messages : 189
    Par défaut
    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 326155Nom : Capture.PNG
Affichages : 452
Taille : 19,6 Ko

  4. #4
    Membre confirmé Avatar de Mr.Robot12
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2016
    Messages : 189
    Par défaut
    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 : 424
Taille : 29,6 Ko

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

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

  5. #5
    Membre Expert

    Homme Profil pro
    Ingénieur Hospitalier
    Inscrit en
    Juillet 2004
    Messages
    993
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur Hospitalier
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 993
    Billets dans le blog
    1
    Par défaut
    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.

  6. #6
    Membre confirmé Avatar de Mr.Robot12
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2016
    Messages : 189
    Par défaut
    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 ?

  7. #7
    Membre Expert

    Homme Profil pro
    Ingénieur Hospitalier
    Inscrit en
    Juillet 2004
    Messages
    993
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur Hospitalier
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 993
    Billets dans le blog
    1
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 26/07/2009, 13h26
  2. Afficher des bitmaps à haute vitesse dans une application
    Par acanicio dans le forum API graphiques
    Réponses: 1
    Dernier message: 27/10/2006, 10h03
  3. Réponses: 2
    Dernier message: 14/06/2006, 08h53
  4. [VBA-E] afficher des données apres saisie dans cellule
    Par user0505 dans le forum Macros et VBA Excel
    Réponses: 5
    Dernier message: 14/04/2006, 14h04
  5. Réponses: 7
    Dernier message: 09/02/2006, 16h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo