le moyen correct de savoir si ma sélection a capturé des éléments existants

Question

Je suis en train de créer une bascule dans D3, et j'essaie d'éviter les variables globales.

Je peux continuer et sélectionner l'élément comme s'il était déjà dans la scène :

d3.select('#awesome_line_graph')

et ensuite tester pour voir si j'ai attrapé quelque chose en utilisant

if (d3.select('#awesome_line_graph')[0].every(function(d){return d===null})){
    // draw awesome line graph
} else {
    d3.select('#awesome_line_graph').remove()
}

mais ce test de l'élément zéro pour peut-être plus d'un élément nul semble terrible et compliqué. Comment dois-je procéder à la place ? Je m'excuse de ne pas connaître beaucoup de javascript.

Answer 1

Utilisez selection.empty() . De même, si la sélection est vide, il n'est pas nécessaire de la supprimer.

Answer 2

Je vous recommande vivement de lire l'ouvrage de Mike Bostock Atelier D3 document. Dans ce document, il explique comment une sélection renvoie un tableau d'éléments qui correspondent aux critères de sélection. Par conséquent, si la longueur du tableau est supérieure à "0", la correspondance et la sélection sont correctes.

Vous pouvez également lire sa documentation sur les " Sélections imbriquées ." Je l'ai trouvé assez utile.

J'espère que cela vous aidera.

Frank

Answer 3

Dans la version d3.js v5, on peut utiliser

if(var n = d3.select('#awesome_line_graph').size() == 0) {
  console.log("no DOM element selected.");
} else {
  console.log(n  + " DOM element(s) selected.");
}

Answer 4

L'utilisation de la longueur ne convient pas car un seul objet contenant tous les résultats sera renvoyé dans les deux cas. Vous pourriez peut-être faire quelque chose comme ...

var selected = d3.select('#selected');
if (selected._group[0][0] == null) { 
    // nothing found 
} else { 
    // found something 
}