D3: actualizar datos con múltiples elementos en un grupo

Tengo un gráfico combinado de barras / líneas. Para cada fila en el archivo de entrada, creo un grupo que contiene múltiples elementos (líneas, rectangularjs, textos):

var myGroups = svg.selectAll('g').data(myData) myGroups.enter().append('g') ... myGroups.append('line') ... myGroups.append('polygon') ... myGroups.append('text') ... 

Actualmente solo

 svg.selectAll('*').remove() 

y crear todo desde cero cada vez que se actualicen los datos. Sin embargo, me gustaría tener una transición sin problemas para todos los elementos.

He revisado este tutorial varias veces, pero todavía no entiendo cómo puedo hacerlo en mi caso.

La clave es manejar todas las selecciones, no solo la opción de ingresar:

 var myGroups = svg.selectAll('g').data(myData); // enter selection var myGroupsEnter = myGroups.enter().append("g"); myGroupsEnter.append("line"); myGroupsEnter.append("polygon"); // ... // update selection -- this will also contain the newly appended elements myGroups.select("line").attr(...); // ... // exit selection myGroups.exit().remove(); 

Aquí hay dos cosas que justifican una explicación más detallada. En primer lugar, los elementos en la selección de entrada que tienen nuevos elementos anexados se fusionan en la selección de actualización. Es decir, no es necesario establecer atributos en los elementos en la selección de entrada si sucede lo mismo en la selección de actualización. Esto le permite agregar nuevos elementos y actualizar los existentes sin duplicar el código.

Lo segundo se vuelve importante en llamadas posteriores con datos actualizados. Como los elementos a los que vincula los datos no son los realmente dibujados, los nuevos datos deben propagarse a ellos. Esto es lo que .select() hace. Es decir, al hacer myGroups.select("line") , está propagando los nuevos datos vinculados a los elementos g a sus elementos myGroups.select("line") line . Entonces, el código para establecer atributos es el mismo que para el caso enter.

Ahora puede simplemente agregar transiciones donde desee antes de configurar los nuevos atributos.