Un cop has carregat les dades i les tens associades als nous elements creats al DOM, com les pots fer servir?
Aquí tenim el codi de l'apartat anterior:
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("Nou paràgraf!");
Canviem la última línia per aquesta:
.text(function(d) {
return d;
});
Comprova el que el nou codi fa a la pàgina de demostració.
Carai!. Hem fet servir les nostres dades per donar contingut a cadascún dels paràgrafs. Tot gràcies a la màgia del mètode data().
Ja veus, quan encadenem els mètodes, a tots els mètodes posteriors a data() pots crear una funció anòmina que accepta un argument com a entrada. En aquest cas fem servir la variable "d". El mètode màgic data() s'assegura que d agafi el valor de la matriu de dades que ocupa la mateixa posició que l'element que esta tractant.
El valor de "l'element actual" canvia cada passada que fa D3 sobre el bucle d'elements. Per exemple, quan el bucle està fent la tercera passada, el nostre codi crea el tercer element p, i la variable d conté el tercer valor de la matriu de dades. Per tant el tercer paràgraf contindrà el text "15".
Si ets novell escrivint les teves pròpies funcions ( = mètodes), l'estructura bàsica de qualsevol d'elles és la següent:
function(input_value) {
//Calcula alguna cosa aquí
return output_value;
}
La funció que hem fet servir es molt simple, gens interessant
function(d) {
return d;
}
i esta ficada dins la funció text() de D3, per tant el resultat de la nostra funció anònima serà l'argument per a la funció text().
.text(function(d) {
return "I can count up to " + d;
});
Però podem ( i ho farem) molt més interessant, perque pots fer servir qualsevol funció.
Si, és el plaer i el perill d'escriure el teu propi codi javascript.
Podem definir les nostres pròpies funcions. Potser t'agradaria afegir una part més de text, que donaria aquest resultat.
.text(function(d) {
return "Puc comptar fins a " + d;
});
Potser t'estàs preguntant per què has d'escriure function(d)... enl lloc de senzillament d directament. Per exemple, això no funcionaria:
.text("Puc comptar fins a " + d);
En aquest context, sense col·locar d dins una funció anònima, d no rep valors.
Pensa en d com un petita i solitaria variable que vol sentir-se acompanyada per la calurosa abraçada que li proporcionen els parèntesis. (Seguint amb la metàfora, si, és esgarrifós pensar que l'abraçada realment li fa un funció anònima -un estranger perillós - i que nomès fa les coses més confuses.)
Aquí d es troba suau i confortablement en poder d'una funció:
.text(function(d) { // <-- Nota la tendra abraçada de l'esquerra
return "Puc comptar fins a " + d;
});
La raó d'aquesta sintaxi és que .text(), .attr(), i molts altres mètodes de D3 prenen una funció com a argument. Per exemple, text() pot prendre facilment qualsevol cadena de text estàtica com a argument:
.text("Alguna cosa escrita")
... o el resultat d'una funció:
.text(algunaFuncio())
... o una mateixa funció anònima potser l'argument, tal com passa si escrius:
.text(function(d) {
return d;
})
En el codi anterior, estàs definint una funció anònima. Si D3 detecta una funció én aquest lloc, pren aquesta funció, i li passa com a argument d els valors del conjunt de dades del mètode data(). Sense una funció aquí, D3 no pot saber a qui ha de passar les dades com a argument d.
Al principi, pot semblar una tonteria i una feina innecessària, per nomès aconseguir tenir un argument d, però la importància d'aquesta manera de fer estarà molt més clara quan treballem amb un codi més complex.
La situació és posa molt més interessant quan explorem altres mètodes de D3, com attr() i style(), que permeten veure els atributs de les seleccions fetes d'HTML i les seves propietats CSS respectivament.
Per exemple, afegint una línia més al nostre codi es produeix aquest resultat.
.style("color", "red");
Tot el text ara és vermell; quina gran cosa. Bé, però podríem fer servir una funció pròpia per convertir el text a color vermell només si l'actual valor de d sobrepassa una certa quantitat. Així que canviem la línia perque faci aquesta funció.
.style("color", function(d) {
if (d > 15) { //el límit és 15
return "red"; // color vermell
}else {
return "black"; // color negre
}
});
Mira aquest codi en funcionament. Comprova com els tres primers paràgrafs son negres, però un cop d sobrepassa el valor de 15, el text és torna de color vermell.
En el proper capítol, farem servir attr() i style() per manipular divs