d3.js - ejemplos - d3js charts examples

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

Question

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

Originalmente estaba haciendo 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 de pensarlo, esperaba que la selección de actualización utilizada en mi transición contuviera los anexos fusionados de la selección de entrada. 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. ¿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 objetivo de la combinación de datos es sincronizar elementos con datos , 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 se correspondan con cada dato, añada primero un elemento de grupo (G) para establecer un mapeo uno a uno de los datos a los elementos. A continuación, agregue elementos secundarios según sea necesario. La estructura resultante es así:

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