Data Visualization Lab - #SOD14 - Bologna - 30 marzo 201430. Creare, aggiornare, distruggere
Il cuore della libreria sta nella capacità di associare i nostri
dati (tipicamente array) a elementi del DOM permettendo di
accedere a quelli modificati, a quelli non ancora esistenti, a
quelli non più utili.
var p = d3.select("body").selectAll("p")
.data([4, 8, 12, 16, 24, 36])
.enter().append("p")
.style("font-size", function(d) { return d + "px"; })
.text(function(d) { return "Sono grande " + d + "px"; });
p.data([36, 24, 16, 12, 8, 4])
.style("font-size", function(d) { return d + "px"; });
p.data([16, 12, 8])
.exit()
.remove();
32. Associazione per chiave (2)
Il metodo data() associa i dati agli elementi del DOM. Può
farlo per indice, ma anche per chiave.
var newSizes = [
{ id: "b", size: 6}, // era { id: "a", size: 6},
{ id: "c", size: 8}, // era { id: "b", size: 8},
{ id: "d", size: 12} // era { id: "c", size: 12}
];
p.data(newSizes, function(d) { return d.id; })
.style("font-size", function(d) { return d.size + "px"; })
.text(function(d) {
return "Sono sempre "+d.id+", ma ora sono grande "+d.size+"px";
});
p.enter().append("p")
.style("font-size", function(d) { return d.size + "px"; })
.text(function(d) {
return "Sono " + d.id + " e sono grande " + d.size + "px";
});
p.exit().remove();