Actualmente estoy leyendo "Visualización de datos con D3 4.x Cookbook Second Edition". El modo de actualización de datos se menciona en el capítulo 3. A veces, el autor usa merge() para lograr la actualización de datos, pero a veces usa selectAll() para lograrlo. He encontrado que en algunos casos no son intercambiables. Estoy confundido en este momento y quiero saber cómo puedo determinar qué camino debo hacer en la actualización de datos.

En el 3.2.2, el autor usa merge() para lograr la actualización de datos

 function render(data) { // <- B var bars = d3.select("body").selectAll("div.h-bar") // <- C .data(data); // Update <- D // Enter bars.enter() // <- E .append("div") // <- F .attr("class", "h-bar") // <- G .merge(bars) // Enter + Update <- H .style("width", function (d) { return (d * 3) + "px"; // <- I }) .text(function (d) { return d; // <- J }); // Exit bars.exit() // <- K .remove(); }

En el 3.6.2, el autor usa selectAll() para lograr la actualización de datos

 function render(data, category) { var bars = d3.select("body").selectAll("div.h-bar") // <-B .data(data); // Enter bars.enter() .append("div") // <-C .attr("class", "h-bar") //.merge(bars) .style("width", function (d) { return (d.expense * 5) + "px";} ) .append("span") // <-D .text(function (d) { return d.category; }); // Update d3.selectAll("div.h-bar").attr("class", "h-bar"); // Filter bars.filter(function (d, i) { // <-E return d.category == category; }) .classed("selected", true); }

¡En serio necesito tu ayuda! ¡Gracias!