¿Se puede reutilizar la selección enter() después de agregar/insertar?

Question

Tengo un escenario en el que deseo utilizar una combinación de datos para agregar 2 elementos nuevos para cada elemento de datos.

que hacía originalmente algo como esto:

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

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

y.transition()... 

Antes pensé que a través, esperaba que la selección de actualización utilizado en mi transición contendría el fusionaron anexa de la selección entrar. Pero, por supuesto, esto no funcionó porque solo hay 1 ranura en la selección por elemento de datos.

Así que cambié el código de modo que aún utilizara la misma selección de enter() dos veces pero luego se volviera a seleccionar para los nuevos elementos para hacer la transición.

Este enfoque funcionó, pero mi pregunta es si esta es una forma recomendada de hacer las cosas o no. ¿Debo asegurarme de dejar de usar enter() después de anexar/insertar? ¿O está bien usarlo para crear múltiples elementos, siempre que recuerde que la selección de actualización solo contendrá los elementos creados al final?

Si resulta que esto está mal, ¿cuál es una mejor manera de lograr esto?

Answer 1

No. El propósito de la combinación de datos es synchronize elements with data, crear, eliminar o actualizar elementos según sea necesario. Si crea elementos dos veces, los elementos ya no corresponderán uno a uno con la matriz de datos encuadernados.

Si desea que dos elementos correspondan a cada dato, entonces anexa un elemento de grupo (G) primero para establecer una correspondencia de uno a uno de los datos a los elementos. A continuación, anexe elementos secundarios según sea necesario. La estructura resultante es la siguiente:

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

Por ejemplo:

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