Discussion :

[Briacp]

Bonjour à tous ,

dans le cadre de mon stage je dois faire de la visualisation de donnée à partir d'un fichier .CSV
Jusqu'ici pas de soucis, je génère un graphe à l'aide de la bibliothèque D3.JS à partir de ce .CSV

Là où ça se gatte c'est quand je dois faire en sorte de diminuer l'opacité de mes points (qui sont plus ou moins gros en fonction d'une des colonne de mon tableau ) lorsque je passe ma souris sur un de ces points :

En synthèse je souhaite que lorsque je passe ma souris sur un point de mon graphe, les autres s'effacent ou presque.

Auriez vous des pistes parce que je bloque .. je sais pas si je dois faire une fonction PHP, ou gérer cet événement directement dans mon JS .. en bref j'ai besoin de vos lumières

Merci d'avance

[zaza576]

Avec Javascript et CSS, tu peux gérer des interactions sur les points de ton graphe pour manipuler leur opacité.

Par exemple :
onHover(pointX5){
parcourir tous les points du graphe sauf le point courant pointX5{
appliquer une propriété CSS pour diminuer l'opacité de moitié tant que la souris n'est pas sortie du focus du point actuel
}
}

Modif : Pourquoi parles tu de PHP ? Tout se fait côté client. Ton graphe est affiché dans ton navigateur. Pas besoin de demander à ton serveur de calculer ce qui peut être fait par le client vu que ça interagit directement sur le DOM de ta page !

[Briacp]

Le problème c'est que je ne sais pas comment identifier chaque point de mon graphe, car je génère le graphe à partir d'un tableau php qui lui même est généré à partir de mon fichier CSV.
Si je pouvais identifier chaque points de mon graphe, le problème serait presque résolu.
Je vais voir ce que je trouve du côté CSS et JS ( j'ai déjà testé quelques choses avec .on("mouseover",fonction) sur mon svg.selectAll("circle") mais cela ne me donne rien ..)

[NoSmoking]

Bonjour,

Le problème c'est que je ne sais pas comment identifier chaque point de mon graphe, car je génère le graphe à partir d'un tableau php qui lui même est généré à partir de mon fichier CSV.

donc à un moment ou à un autre tu as accès à tous tes points.

[Briacp]

Oui, la première colonne de mon tableau regroupe les identifiants, mais je ne sais pas comment utiliser cette colonne. Dois-je faire une fonction JS ? Si oui, où l'utiliser ensuite ..
Je vous avoue que ce problème me perd un peut dans mes raisonnements

[Briacp]

Problème résolu j'ai finalement trouvé une solution :

Lors de l'appel de la méthode

svg.selectAll("circle")
.attr(...)
.attr(...)
...
//il faut rajouter un gestionnaire d'évenement mouseover sur l'élément sur lequel nous voulons interagir
.on("mouseover",fonctionMouseOver);


Dans notre fonctionMouseOver il faut invoquer une méthode sur tous les éléments de la collection comme ça on évite de passer par une boucle :

d3.selectAll("circle).style("opacity",0.1)
puis modifier l'opacité de l'élément courrant :
d3.select(this).style("opacity",1)

et faire une fonction mouseleave pour remettre tous les paramètres d'origine

Si cela n'est pas très clair il ne faut pas hésiter à m'écrire.