Discussion :

[NoSmoking]

Bonne année également !

... mais j'aimerais que les liens deviennent rouge comme dans votre cas. si j'ai bien compris c'est votre fonction pour tracer les rectangles qui gère ceci

ceci est géré en ajoutant en CSS

Code css :

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

1
2
3
4
[class^="case-"].hover ~ * {
  color: #F00;
  stroke-width: 2px;
}

associé au CSS pour les traits

Code css :

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

1
2
3
4
5
6
.trait {
  color: #069;
  stroke: currentColor;
  fill: none;
  stroke-width: 1px;
}

c'est le sélecteur d'adjacence « élargie », ou indirecte, ~ (tilde) qui fait faire le boulot, on est donc tributaire de la structure de construction qui ressemble à

Code html :

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

1
2
3
4
5
6
7
8
9
10
<g>
  <rect class="case-vert"></rect>
  <text>Libellé</text>
  <path class="trait"></path>
  <polyline class="arrow-right"></polyline>
  <circle class="ancre-depart"></circle>
  <path class="trait"></path>
  <polyline class="arrow-right"></polyline>
  <circle class="ancre-depart"></circle>
</g>

.... je ne peux pas l'utiliser car je n'ai pas la même structure de données, et surtout je n'ai pas de durée pour une tâche.

pour moi la structure de tes données n'est pas un frein à l'adaptation et si une tâche n'a pas de durée alors ce n'est pas une tâche ou alors il te faut lui mettre une durée minimum par défaut.

... j'ai essayé de mettre un id pour les traits et ensuite de changer la couleur quand je passe par dessus une tâche avec du jQuery mais ça ne marche pas.

il est souvent nécessaire de penser simple et basique

[Mr.Robot12]

ceci est géré en ajoutant en CSS
c'est le sélecteur d'adjacence « élargie », ou indirecte, ~ (tilde) qui fait faire le boulot, on est donc tributaire de la structure de construction qui ressemble à

pour les traits en rouge j'ai réussi : je change la classe css du trait quand je survole une tâche :

Code JAVASCRIPT :

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

1
2
3
 
var trait = "trait"+d3.select(this).data()[0].task;
$('path[id="'+trait+'"]').attr('class', 'traitRouge');

pour le cas de faire passer les traits au premier plan comme vous j'y arrive pas.

Code JAVASCRIPT :

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

1
2
3
4
5
 
svg.insert("svg path", trait);
d3.select(d3.select('#'+trait).node().parentNode).insert('path', '#'+trait)
d3.select("svg g").insertBefore(trait, null);
$(this).parentNode.insertBefore(trait, rectangles.parentNode)

j'ai essayé chacune de ces lignes une par une mais ça ne marche pas

[NoSmoking]

Pour la mise sur le dessus on en a parlé aux posts #47, #49 et #55.

Pour faire cela au survol du groupe on passe celui-ci au dessus du panier de la sorte tous les éléments qui y sont contenus passerons au dessus des autres.

Une façon de faire, lors de la création de tes éléments <g> tu peux ajouter l'action suivante

Code :

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

1
2
3
.on('mouseenter', function() {      
  this.parentNode.appendChild(this);
})

[Mr.Robot12]

je vais essayer je vous tiens au courant

[Mr.Robot12]

j'ai essayé de faire mais rien ne marche

sur plus d'une dizaine de codes que j'ai testé y a par exemple ça qui marche à moitié :

Code JAVASCRIPT :

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

(d3.select('path[id="'+trait+'"]').node()).parentNode.appendChild(d3.select('path[id="'+trait+'"]').node());

avec ça le trait passe devant la tête de la flèche uniquement.


ensuite y a ça :

Code JAVASCRIPT :

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

1
2
3
4
 
var test = d3.select('path[id="'+trait+'"]').node()
var fleche = $(test).css({'stroke':'#F00'}).parent();
$('svg.svg').append(test.parentNode);

avec ça la flèche passe bien au premier plan mais ça fais disparaitre tous les noms des tâches du coup je peux plus rien faire

j'ai essayé avec votre code aussi mais toujours pas le résultat attendu

[NoSmoking]

Le meilleur moyen de gérer cela, selon moi, et de gérer cela par plan ou calque.

Regarde bien la structure SVG que t'ai mis ci dessus, chaque ensemble est dans un groupe <g> et c'est ce groupe que l'on place au dessus de la sorte rectangle, fléches et ancres sont placés au dessus, mais il me semble que je me répète

Dans l'exemple que j'ai mis au post #47 l'événement est déclenché au survol du rectangle, voir code lignes 210 à 227.

[Mr.Robot12]

Le meilleur moyen de gérer cela, selon moi, et de gérer cela par plan ou calque.

Regarde bien la structure SVG que t'ai mis ci dessus, chaque ensemble est dans un groupe <g> et c'est ce groupe que l'on place au dessus de la sorte rectangle, fléches et ancres sont placés au dessus, mais il me semble que je me répète

dans mon cas en faite il y a une balise <g> où il y a tous les rect et text. c'est pas comme dans le votre où il y a un <g> pour chaque rect.

Dans l'exemple que j'ai mis au post #47 l'événement est déclenché au survol du rectangle, voir code lignes 210 à 227.

en faite j'ai essayé d'adapter votre fonction handleMouseOver() aussi mais ça marchait toujours pas .

[NoSmoking]

dans mon cas en faite il y a une balise <g> où il y a tous les rect et text. c'est pas comme dans le votre où il y a un <g> pour chaque rect.

si tu veux une gestion simple c'est donc ta structure de construction, raisonnement par « calque », qu'il te faut changer.

[Mr.Robot12]

y a vraiment pas d'autres moyens ? parce que du coup je vais devoir changer toute la structure et ça va être hyper compliqué et je vais m'y perdre

[NoSmoking]

Rien de compliqué, regarde la démarche suivie dans le code du post #47.

[Mr.Robot12]

bon je vais essayer merci

[Mr.Robot12]

c'est possible de changer le nœud d'un élément SVG ?
j'ai une balise <g> et en faite si je mets les flèches sur ce nœud là elles sont au premier plan. je me suis aperçu de ça en faisant des tests dans la fonction de création des flèches.

ce <g> est dans une variable rectangles_debug et du coup j'ai tenté de faire ça : rectangles_debug.append(d3.select('path[id="'+trait+'"]').node());
mais j'ai une erreur :


est-ce que c'est juste pas possible ou c'est moi j'ai mal fais ?

[NoSmoking]

Il te faut vérifier les objets que tu manipules et si les méthodes s'appliquent.
De quel type est rectangles_debug, que récupères tu avec d3.select('path[id="'+trait+'"]' ?

[Mr.Robot12]

ça c'est la variable rectangles_debug :

Code JAVASCRIPT :

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

1
2
3
4
5
 
var rectangles_debug = svg.append('g')
		.selectAll("rect")
		.data(theArray)
		.enter();

et quand je fais d3.select('path[id="'+trait+'"]').node() ça me retourne le nœud : [object SVGPathElement]

[Mr.Robot12]

j'ai trouvé une solution, mais elle ne marche pas parfaitement
y a moyen d faire mieux ou pas ?

j'ai mis un id pour la balise <g> dans la variable rectangles_debug.
ce qui donne :

Code JAVASCRIPT :

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

1
2
3
4
5
6
 
		var rectangles_debug = svg.append('g')
		.attr("id", "data-graph")
		.selectAll("rect")
		.data(theArray)
		.enter();

ensuite je fais ça quand je survole une tâche :

Code JAVASCRIPT :

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

1
2
3
 
nodeTrait = d3.select('path[id="'+trait+'"]').node();
$("#data-graph").append(nodeTrait);

en faite il y a des endroits où la flèche passe au premier plan et d'autres où elle ne passe pas

[NoSmoking]

Je ne comprend pas pourquoi tu t'obstines à vouloir déplacer les éléments une fois crées !

en faite il y a des endroits où la flèche passe au premier plan et d'autres où elle ne passe pas

surement un problème de manque de rigueur à la création des éléments.

[Mr.Robot12]

Je ne comprend pas pourquoi tu t'obstines à vouloir déplacer les éléments une fois crées !

c'est pas comme ça qu'on fait pour que les flèches passent au premier plan ?
et vous faites la même chose avec insertBefore non ?

[headmax]

Salut , comme le dit nosmoking tu as utilisé une structure qui n'est pas comme le noeud que j'ai utilisé dans mon exemple commençant pas la balise g doit être prit en compte pour chaque groupe ce que tu n'a pas fait pourtant au fils des posts je pensais que tu avait bien intégré ces éléments. Je t'ai mit un exemple qui "marche" en CSS selon ton niveau de compréhension sans ce fameux nœud mais ça ne marche pas pour toute les marqueurs end (pointe de la flèche) par contre j'ai rajouté de l'animation pour faire plus "Joulie".

https://codepen.io/headmax/full/opEJNz/

L'idéal tu l'aura compris c'est de respecter la structure pour le faire comme dans mon exemple :

https://codepen.io/headmax/pen/opXdOL

[Mr.Robot12]

j'ai vu votre code, déjà merci
en faite j'ai pris un exemple qui était sur codepen donc la structure était déjà comme çà.
j'ai regardé votre exemple et sauf si j'ai pas bien compris dans votre cas aussi il y a une balise <g> où il y a tous les <rect>
et si non du coup mettre la flèche au premier plan quand je survole une tâche n'est pas possible ?

[NoSmoking]

c'est pas comme ça qu'on fait pour que les flèches passent au premier plan ?

pas exactement, il te faut travailler sur le groupe <g> conteneur de chaque tache.
Il faut effectivement bien découper tes éléments et les mettre dans un même plan/calque.
Exemple de ce que l'on obtient avec l'exemple que j'ai fourni :

dans le même groupe <g> j'ai par exemple ceci

dans un autre groupe <g> j'ai par exemple ceci

et ainsi de suite ...

Chaque groupe contient le rectangle, le libellé, le(s) path(s), le(s) point(s) et la(es) flèche(s) pour obtenir au final quelque chose comme

et vous faites la même chose avec insertBefore non ?

pas exactement le inserBefore travaille sur les éléments <g> contenus dans le groupe principal <g id="data-graph">.