D3 fa servir una tècnica anomenada chain syntax (sintaxi d'encadenament), que potser tinguis vista de jQuery.
"Encadenant" mètodes, que es fa fent servir un punt de separació, pots realitzar diverses operacions en una mateixa línia de codi. Pot ser ràpid i senzill, però convé entendre com funciona, per estalviar-se hores i hores de depuració i maldecaps posteriors.
Per començar, les funcions i els mètodes són dos paraules diferents pel mateix concepte: un tros de codi que rep un argument d'entrada, fa alguna acció, i retorna alguna dada.
Revisitem la nostra primera línia de codi D3 ( Aquí hi ha la página de demostració).
d3.select("body").append("p").text("Nou paràgraf!");
Això pot semblar un gran embolic, sobretot si són les teves primeres passes en programació.
Així que, el primer que cal saber és que, tant Javascript com HTML, no fan cas dels espais en blanc, ni dels salts de línia. Per tant pots escriure cada mètode en una línia separada per fer-ho més entenedor:
d3.select("body")
.append("p")
.text("Nou paràgraf!");
Cadascú té el seu propi estil de codi. Fes servir la indentació, els salts de línia, i els espais en blanc ( tabulador o espais) que et semblin millor.
Anem a veure cada part d'aquest codi.
d3 - Fa referència a l'objecte D3, per poder accedir als seus mètodes.
.seclect("body") - Dona al mètode select() un selector CSS com a argument d'entrada i aquest retorna una referència al primer element del DOM que hi encaixa.
Fes servir selectAll() quan vulguis més d'un element.
En aquest cas, només volem l'element body, així que només una referencia, la primera referència body es passa al seguüent mètode de la cadena.
.append("p") -append() crea els elements nous que especifiques al DOM i els afegeix al final (però a dins, no desprès) de la selecció que li han passat els mètodes anterior. En el nostre cas, volem crear un nou p ( paràgraf) dins l'etiqueta body
Hem especificat p com l'argument d'entrada, i li hem passat, del mètode select() anterior la referència a body. Per acabar, append(), al seu torn també passa la referència a l'element que ha creat al següent mètode de la cadena.
.text("Nou paràgraf!") - text() agafa una cadena i la inserta entre les etiquetes d'obertura i tancament de la selecció actual. Com que l'anterior mètode havia passat una referència al nou p, aquest codi inserta el nou text entre les etiquetes <p> i </p>. ( en el cas que ja hi haguès algun text entre ambdues etiquetes, es sobreescriuria) .
; - La sempre important semicoma indica la fi d'aquesta línia de codi.
La majoria, però no tots, els mètodes de D3 retornen una selecció, o més ben dit, la referència a aquesta selecció, la qual permet aquesta tècnica tant útil de l'encadenament de mètodes.
Normalment, un mètode retorna una referencia a l'element sobre el que acaba d'actuar, però no sempre.
Així que recorda. En l'encadeanment l'ordre dels mètodes és important. El retorn d'un mètode ha de coincidir amb el que espera rebre el següent mètode de la cadena.
Si les entrades i sortides adjacents no coincideixen, la transferència es trencarà com si cau el testimoni en una carrera de relleus.
Quan vulguis saber que és el que espera cada funció i que és el que retorna, la referència a l'API és qui t'ajudarà. Conté informació detallada sobre cada mètode, incloen-t'hi si torna o no una selecció.
El nostre senzill codi pot ser reescrit sense la sintaxi de cadena, i quedaria així:
var body = d3.select("body");
var p = body.append("p");
p.text("Nou paràgraf!");
Renoi!!!. Quin embolic. Potser si però hi haurà vegades que hauràs de trencar l'encadenament, com ara quan estiguis cridant funcions que no s'entenen entre elles. O si vols organitzar el teu codi d'una manera que tingui més sentit per a tu.