Discussion :

[Mr.Robot12]

d'accord merci pour les clarifications.
je vais essayer modifier la structure
je vous tiens au courant

[Mr.Robot12]

bonjour,
alors j'ai montré le résultat à mon tuteur et d'abord il était plutôt déçu mais après avoir agrandi le graph pour qu'il passe sur au moins 2-3 écrans il est plutôt satisfait.
il m'a demandé de faire plusieurs améliorations et plein d'ajouts très long et compliqué.
le plus simple de ce qu'il a demandé est de griser les tâches en gris quand on survole une tâche : càd toutes les tâches qui ne sont pas des enfants de cette tâche doivent être en gris (donc toutes les tâches sauf elle-même et ses enfants)

donc j'ai fais ceci :

Code JAVASCRIPT :

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

1
2
3
4
5
6
7
8
9
10
11
 
var task = d3.select(this).data()[0].task;
var color = d3.select(this).data()[0].color;
var oNext;
if(d3.select(this).data()[0].successor.length > 0) {
	oNext = d3.select(this).data()[0].successor.split(", ");
	oNext.forEach(function(next_id) {
		$('rect[id!="'+next_id.trim()+'"]').attr("fill", "#BFBFBF");
		$('rect[id="'+task+'"]').attr("fill", color);
	});
}

ça marche pour certains mais pour d'autres ça ne marche pas, pour certains les enfants sont grisé
l'inverse marche, càd mettre uniquement les successeurs en gris fonctionne. alors pourquoi est-ce que ce que je veux ne marche pas ?

le retour dans la couleur initial c'est bon

vous pouvez m'aider svp

[Mr.Robot12]

bon j'ai dû faire comme ça et ça marche:

Code JAVASCRIPT :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
			var task = d3.select(this).data()[0].task;
			var color = d3.select(this).data()[0].color;
			var oNext;
 
			if(d3.select(this).data()[0].successor.length > 0) {
				oNext = d3.select(this).data()[0].successor.split(", ");
			    oNext.forEach(function(next_id) {
			    	$('rect').attr("fill", "#BFBFBF");
			    	$('rect[id="'+task+'"]').attr("fill", color);
			    	taskArray.forEach(function(el) {
			    		if(el.task == next_id.trim()) {
			    			$('rect[id~="'+el.task+'"]').css("fill", el.color);
			    		}
				});
			    });
			}

du coup dans la fonction onmouseout je dois faire :

Code JAVASCRIPT :

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

1
2
3
4
5
 
			taskArray.forEach(function(el) {
				$('rect[id="'+el.task+'"]').css("fill", "");
				$('rect[id="'+el.task+'"]').attr("fill", el.color);
			});

y a moyen de faire mieux ou pas ?

[NoSmoking]

... y a moyen de faire mieux ou pas ?

je pense qu'en passant pas des classes et en gérant cela via le CSS cela serait plus efficace et plus facilement maintenable.
Et si maintenant ils veulent que les traits soient opaque ?

Nota: cela va de soit que la structure du SVG doit être rigoureuse !

Cette question aurait quand même mérité une nouvelle discussion car on commence a avoir du mal à s'y retrouver.

[Mr.Robot12]

d'accord merci pour votre réponse