diagram = {
const node = d3
.create("div")
.style("width", "100px")
.style("height", "200px");
let data_spans = node.append("div").style("margin", "10px").selectAll("span");
return Object.assign(node.node(), {
update(data) {
const t = node.transition().duration(1500);
const t_exit = node.transition().duration(3000);
data_spans = data_spans
.data(data, (d) => d)
.join(
(enter) =>
enter
.append("span")
.style("padding", "10px")
.style("margin", "10px")
.style("background", "green")
.style("border", "1px solid")
.text((d) => d),
(update) => update,
(exit) =>
exit.call((text) =>
text.transition(t).remove().style("background", "red")
)
)
.call((text) => text.transition(t).style("background", "white"));
}
});
}