Pouvez entrer() sélection de l'être réutilisé après ajouter/insérer?

Question

J'ai un scénario où je veux utiliser une liaison de données d'ajouter 2 nouveaux éléments pour chaque élément de données.

J'ai été à l'origine de faire quelque chose comme ceci:

var y = d3.selectAll("line")
    .data([123, 456]);

y.enter().append("line");  // assume attr and style set
y.enter().append("line");

y.transition()...

Avant je pensais, je m'attendais à ce que la mise à jour de sélection utilisé dans ma période de transition permettrait de contenir la fusion ajoute de l'entrée de sélection. Mais bien sûr, cela ne fonctionne pas parce qu'il y a seulement 1 emplacement dans la sélection par l'élément de données.

J'ai donc modifié le code tel qu'il est toujours utilisé la même entrée() sélection deux fois puis resélectionnés pour les nouveaux éléments afin de faire la transition.

Cette approche a fonctionné, mais ma question est de savoir si cela est une bonne façon d'aborder les choses. Dois-je vérifier d'arrêter d'utiliser enter() après je ajouter/insérer? Ou est-ce OK de ne l'utiliser pour créer plusieurs éléments aussi longtemps que je me souviens que la mise à jour de la sélection ne comporte que les éléments créés dernier?

Si il fait tourner que c'est mal, ce qui est une meilleure façon d'atteindre cet objectif?

Answer 1

Pas de. La finalité des données-jointure est de synchroniser des éléments avec des données, la création, la suppression ou la mise à jour d'éléments que nécessaire. Si vous créez des éléments à deux reprises, les éléments qui ne correspondent plus un-à-un avec le tableau de données.

Si vous avez besoin de deux éléments qui correspondent à chaque donnée, puis ajouter un groupe (G) de l'élément premier à établir un one-to-one mapping de données à des éléments. Puis ajouter de l'enfant les éléments nécessaires. La structure qui en résulte est comme ceci:

<g>
  <line class="line1"></line>
  <line class="line2"></line>
</g>
<g>
  <line class="line1"></line>
  <line class="line2"></line>
</g>

Par exemple:

var g = svg.selectAll("g")
    .data([123, 456]);

var gEnter = g.enter().append("g");
gEnter.append("line").attr("class", "line1");
gEnter.append("line").attr("class", "line2");