Javascript Girl
  1. Javascript Girl
  3. Équivalent du sélecteur «non» de jQuery dans D3.js?
Intereting Posts
Calcul de la caméra près et loin des limites d'avion Autoriser uniquement certains caractères Comment puis-je forcer l'entrée en majuscules dans une zone de texte ASP.NET? Erreur "Impossible de charger la ressource locale: fichier: // chemin partagé" SVG href ID n'est pas trouvé lors d'un sous-dossier / sous-dossier Pourquoi ne pas utiliser des variables globales en JavaScript pour quelque chose qui est constant? Math.random () – Non aléatoire Pourquoi vue.js ne met pas à jour le dom avec datepicker à l'aide de moment.js Comment exécuter une fonction sélectionnée au hasard en JavaScript? Comment déboguer une tâche Gulp? Comment faire défiler vers le haut de la page en cliquant sur le bouton? Javascript dans une page wordpress Google Maps Error: Uncaught InvalidValueError: setIcon: pas une chaîne; Et aucune propriété url; Et aucune propriété de chemin Vanilla JS délégation de l'événement – traitant des éléments enfants de l'élément cible Résultat différent entre l'opérateur localCompare et la comparaison pour les caractères spéciaux en JavaScript

Équivalent du sélecteur «non» de jQuery dans D3.js?

Dans D3.js, j'aimerais sélectionner tous les éléments qui correspondent à un sélecteur à l' exception de l'élément actuel.

La raison en est que j'aimerais passer la souris sur un cercle, et que tous les autres cercles avec la même classe soient bleu clair, mais le cercle actuel reste le même.

C'est ce que j'ai actuellement: 

vis.selectAll('circle.prospect') .on("mouseover", function(d) { console.log(d); d3.selectAll('circle.prospect').transition().style('opacity','0.5'); d3.select(this).attr('opacity','1.0'); });

Dans jQuery, je pourrais faire cela en utilisant not . Quelqu'un connait-il l'équivalent D3.js?

Une façon encore plus simple d'aborder cela serait d'utiliser le pouvoir des opérateurs de D3: 

 vis.selectAll('circle.prospect').on("mouseover", function(d) { var circleUnderMouse = this; d3.selectAll('circle.prospect').transition().style('opacity',function () { return (this === circleUnderMouse) ? 1.0 : 0.5; }); });

Il y a une différence ici, contrairement à votre code original, l' circleUnderMouse élément circleUnderMouse sera également bien animée. Si elle est déjà entièrement opaque, probablement pas grave, sinon vous pourriez utiliser l'opérateur .duration () d'une manière similaire pour accélérer le temps de CircleUnderMouse à 0 et les autres plus longtemps.

Si vos éléments possèdent des identifiants CSS accessibles, vous pouvez utiliser le sélecteur :not() . Quelques exemples possibles: 

 d3.selectAll("circle.prospect:not(#" + this.id + ")"); d3.selectAll("circle.prospect:not(." + someUniqueClassFrom(d) + ")"); d3.selectAll("circle.prospect:not([uniqueAttr=" + this.getAttribute('uniqueAttr') + "])");

La raison d3.selectAll('circle.prospect:not(this)') laquelle d3.selectAll('circle.prospect:not(this)') ne fonctionne pas parce qu'il dit littéralement de filtrer tous les éléments <this></this> – ce qui n'est évidemment pas votre intention, et comme c'est le cas Déjà sélectionner uniquement les éléments <circle></circle> n'aurait aucun effet indépendamment.

Même si vous n'appliquez généralement aucun attribut DOM unique, il n'y a aucune raison pour laquelle vous ne pouvez pas définir un temporairement: 

 vis.selectAll('circle.prospect') .on("mouseover", function(d) { this.id = 'temp-' + Math.random(); d3.selectAll('circle.prospect:not(#' + this.id + ')').transition().style('opacity','0.5'); d3.select(this).attr('opacity','1.0'); this.id = ''; });

Cela dit, cependant, si vos éléments n'ont déjà déjà pas d'identité, je pense que la solution d'Ian Roberts est probablement ce que je ferais au lieu de ce type d'identifiant temporaire.

Vous pouvez filter une sélection: 

 vis.selectAll('circle.prospect') .on("mouseover", function(d) { console.log(d); var circleUnderMouse = this; d3.selectAll('circle.prospect').filter(function(d,i) { return (this !== circleUnderMouse); }).transition().style('opacity','0.5'); d3.select(this).attr('opacity','1.0'); });