Événement onClick avec filtre / D3JS

Version imprimable

26/01/2015, 09h56
Briacp

Événement onClick avec filtre / D3JS

Bonjour à tous,

j'ai un projet de visualisation de données, actuellement ma visualisation de données fonctionne correctement et je veux désormais rendre ma page un peut plus dynamique :

J'aimerai donc qu'en cliquant sur un rectangle de ma légende seul les points correspondant à cet élément de légende ne s'affichent sur mon graphe, l'élément commun à la légende et à mes points de graphe serait par exemple la couleur (rectangle bleu = points bleus ).

Mon problème est que je n'arrive pas a sélectionner la couleur de l'élément sur lequel je clique et ensuite je ne sais pas comment affecter un filtre à mon graphique.

Si vous avez des idées ...
merci d'avance pour vos idées !

Bonjour,

voici un petit exemple pour la récupération de la couleur.
En ce qui concerne la partie graphique, il faudrait que tu nous dise ce que tu utilise comme lib

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
  <script type="text/javascript">
    function clickrectangle(color)
    {
      console.log(color);
    }
  </script>
</head>
<body>
<div style="background:RED;" onclick="clickrectangle(this.style.background)">RED</div>
<div style="background:GREEN;" onclick="clickrectangle(this.style.background)">GREEN</div>
<div style="background:BLUE;" onclick="clickrectangle(this.style.background)">BLUE</div>
</body>
</html>

J'utilise la librairie D3.JS pour la visualisation des données.

J'ai essayé une chose comme la suivant :
Code:

1 2 3 d3.selectAll("#legende").on("mouseover", function(da, indLegende) { d3.selectAll("circles").style("opacity", function(db, indCircle) { cVal = (indCircle == indLegende) ? 1 : 0; return opacityVal; } ); });
Cela met en opacité à 1 le premier cercle de mon tableau quand je passe ma souris sur mon premier élément de légende et l'opacité des autres cercles à zéro, le deuxième élément de mon tableau quand je passe ma souris sur le deuxième élément de légende etc ...

Et moi je veux que ça m'affiche les points correspondants à ma légende et c'est là que je bloque !

montrer cacher une courbe sur simple clique de sa légende avec d3.js

Salut,

il est plus utile de montrer/cacher une courbe en cliquant sur sa légende.

par example :
Code:

1 2 3 4 5 d3.selectAll("#legende").on("click",function(){ var color = d3.select(this).attr("stroke"); d3.selectAll("path[stroke="+color+"]").each(function(){this.style.opacity=this.style.opacity==0?1:0;}); });

29/01/2015, 11h49
Briacp

Le problème c'est que je ne veux pas modifier un seul point mais plusieurs sur le clique légende, c'est là que ça pêche !
29/01/2015, 11h53
prodev73

le code précédent modifie tous les path de la même couleur que celle de ta legende