Événement onClick avec filtre / D3JS

**Briacp** · 26/01/2015, 09h56

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 !

**prodev73** · 28/01/2015, 12h07

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 :

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

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>

**Briacp** · 28/01/2015, 16h06

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

J'ai essayé une chose comme la suivant :

Code :

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

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 !

**prodev73** · 29/01/2015, 11h36

Salut,

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

par example :

Code :

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

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;});
});

**Briacp** · 29/01/2015, 11h49

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 !

**prodev73** · 29/01/2015, 11h53

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

Événement onClick avec filtre / D3JS

JavaScript

Discussions similaires

Partager

Partager