Pourquoi sont-d3 (select) et selectAll() de se comporter différemment?

Je joue avec le faites glisser les multiples exemple, et j'ai remarqué quelque chose que je ne peux pas l'expliquer.

Dans cet extrait de code:

var svg = d3.select("body").selectAll("svg")
    .data(d3.range(16).map(function() { return {x: width / 2, y: height / 2}; }))
    .enter().append("svg")
    .attr("width", width)
    .attr("height", height);

J'ai changé selectAll à select. Il fonctionne toujours, mais maintenant, le svg éléments sont ajoutés après la </body> tag. Le code d'origine, avec selectAll, les ajoute après la <body> balise que vous attendez.

Depuis le html d'origine ne contient pas codé en dur <svg> élément, je pense que les deux select et selectAll il suffit de retourner le vide de sélection. Donc je ne peux pas comprendre pourquoi ils entraîner des comportements différents.

Je suis à la recherche d'une explication. Merci!

  • Eh bien, il ne fait pas de sens pour sélectionner un élément, si vous voulez traiter avec plusieurs. Donc, je pense que l'utilisation d' .select + .data ne devrait pas être un cas d'utilisation, de toute façon. .select semble créer une sélection avec parentNode être <html> (le HTML nœud racine) et .selectAll une sélection avec <body> (après .select('body')). En ajoutant les éléments de html ne semble pas être le comportement attendu, mais il pourrait être intentionnelle. Je vais demander à l'auteur, il pourrait être un bug aussi.
  • re: votre point de vue sur la validité de l'utilisation de sélectionner, ma compréhension était que les deux de sélectionner et de selectAll retour une sélection de l'objet, qui est une sorte de collection. il se trouve que la collection retournée par sélectionner arrive à avoir un seul élément (ou est vide). ainsi, à l'application des données() est valide dans les deux cas. veuillez me corriger si cette interprétation est erronée
  • .sélectionnez doit il suffit de prendre le premier élément qui correspond à l'identifiant, il ne faut pas ajouter différemment selectAll. J'avais poster comme un bug sur Github.
InformationsquelleAutor Jonah | 2013-01-06
  1. 8

    La différence fondamentale entre les sélectionner et selectAll est que de sélectionner les courges la hiérarchie de l'existant sélections, tandis que selectAll la préserve.

    Par conséquent, lorsque vous utilisez un selectAll après l'autre, le résultat sera un peu comme une liste de boucles for imbriquées.

    http://bost.ocks.org/mike/nest/

    InformationsquelleAutor Avi Dubey
  2. 4

    Vérifier Mike Bostock post sur select/selectAll: Imbriqués Les Sélections

    Citer:

    Il existe une différence importante entre les sélectionner et selectAll: sélectionnez préserve le regroupement, alors que selectAll crée un nouveau regroupement. Appel à select préserve ainsi les données, index et même le nœud parent de la sélection d'origine!

    InformationsquelleAutor Dave Foster
  3. 0

    D'autres réponses ici sont un peu hors, et de ne pas citer la source correcte; ce n'est qu'indirectement liées à la nidification. D3 auteur l'explique dans son rejoindre concept. Je l'ai revue qu'ici par souci d'exhaustivité:

    Vous avez deux sets (tableaux):

    1. le jeu de données que les lecteurs de la visualisation;
    2. les éléments HTML qui représentent chaque élément de données dans un dataset.

    Ces ensembles peut ne pas être exactement la même à un moment donné au cours de l'application à exécuter. Imaginez un temps réel de l'ensemble de données (stream) - peut-être la dernière fois nous avons seulement obtenu 98 éléments, maintenant au lieu de cela nous avons des 100. La page a toujours 98 <div>s, mais maintenant nous avons besoin de créer 2 plus. C'est exactement ce qui se passe, automatiquement, dans votre code:

    1. En appelant .selectAll("svg") vous dites: "Créer un jeu de <svg> éléments même si elles n'existent pas." Une autre façon de mettre c'est, "imaginons que l'on peut sélectionner un ensemble de <svg>s qui correspond à l'ensemble de données que nous avons donné. Maintenant, aller de l'avant et de créer ensemble."
    2. ...Ce qui est exactement ce .enter().append(...) ne puis. À l'inverse, s'il y avait eu trop d'éléments pour notre nouveau jeu de données (car nous avons déjà eu plus d'éléments dans le jeu de données que nous faisons maintenant), .exit().remove(...) de traiter avec que.

    enter est l'ensemble des éléments dont nous avons besoin pour créer; exit est de ceux que nous avons besoin de l'enlever.

    Votre .selectAll("svg") serait de retour rien, mais comme c'est de plus en plus d'une proposition qu'un impératif, il crée alors ce dont il a besoin dans .enter().append("svg"), afin de faire correspondre le jeu de données donné.

    InformationsquelleAutor Engineer