Dibuixant SVG's
Ara que estem familiaritzats amb l'estructura bàsica d'un SVG i els seus elements, com podem començar a generar formes des de les nostres dades?
Te n'hauràs adonat que totes les propietats dels elements de l'SVG s'especifiquen com a (atributs) attr. Així és, són incloses com a parelles propietat/valor entre les etiquetes de cada element, tal com això:
<element property="value"/>
Caram!! Això s'assembla molt a codi HTML
<p class="eureka">
Hem fet servir els mètodes de D3, append() i attr() per crear nous elements d'HTML i assignar-los els seus atributs. Des del moment en que l'element SVG existeix en el DOM, tal com passa amb els elements HTML, podem fer servir append() i attr() de la mateixa forma per generar imatges SVG!!
Crear el SVG
Primer, necessitem crear l'element SVG a on col·locar els nostres dibuixos:
d3.select("body").append("svg");
El codi anterior busca l'element body i li afegeix (append()) un nou element svg just abans de l'etiqueta de tancament d'aquest element. Tot i que aquest codi funciona et recomano fer-ho d'aquesta manera:
var svg = d3.select("body").append("svg");
Recordes que la majoria dels mètodes de D3 retornen una referència als elements del DOM sobre els que actues? Creant una nova variable svg, podrem utilitzar la referencia capturada pel mètode append().
Pensa amb svg no com una 'variable' sinó com la 'referència que apunta a l'objecte SVG que acabem de crear'. Aquesta referència ens estalviarà molt de codi posteriorment. En lloc de buscar aquesta referència cada vegada — com a d3.select("svg") — , ja la tindrem a svg.
svg.attr("width", 500)
.attr("height", 50);
Alternativament, també s'hagués pogut escriure en una sola línia de codi:
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 50);
Mira la demo per aquest codi Inspecciona el DOM i fixa't que hi ha, certament, un element SVG buit.
Per simplificar-te la vida, et recomano posar els valors d'amplada i alçada en variables al principi del teu codi, d'aquesta manera (mira el codi font):
//Width and height ( amplada i alçada)
var w = 500;
var h = 50;
A partir d'ara ho faré a tots els exemples. Posant els valors de grandària en variables, es fàcil referenciar-los a qualsevol altra part del codi, com ara:
var svg = d3.select("body")
.append("svg")
.attr("width", w) // <-- Aquí
.attr("height", h); // <-- i també aquí!
Fins i tot, si m'enviessis una petició per 'variabilitzar' el mon real, m'hi sumaria entusiamat.
Formes creades a partir de les dades
Ha arribat el moment d'afegir formes gràfiques. Repesco la nostra vella matriu de confiança.
var dataset = [ 5, 10, 15, 20, 25 ];
i faig servir data() per iterar sobre cada valor de la matriu, creant un cercle amb cadascun d'ells.
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
Recorda, el mètode selectAll() retornarà una referència buida pels cercles ( perque encara no existeixen), data() uneix els valors de la matriu amb els elements que haurem creat, enter() retorna la referència als espais creats pels nous elements, i append() finalment afegeix els cercles al DOM
Per fer més senzilla la referència a tots els cercles després, podem crear una variable a on guardar-les.
var circles = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
Perfecte, però tots aquests cercles necessiten una posició i una grandària. Estigues alerta, el codi que ve a continuació et pot tornar boig.
circles.attr("cx", function(d, i) {
return (i * 50) + 25;
})
.attr("cy", h/2)
.attr("r", function(d) {
return d;
});
Un regal pels ulls aquesta demo. Anem a veure el codi pas a pas.
circles.attr("cx", function(d, i) {
return (i * 50) + 25;
})
Pren la referència a tots els circles i assigna l'atribut cx per a cadascun. Les nostres dades no han estat encara unides als elements circle, així que per a cada circle, el valor d és igual al valor que ocupa la mateixa posició a la matriu (5, 10, 15, 20, or 25).
Un altre valor, i, també es crea automàticament. i es l'índex numèric que correspont al valor de la passada actual. El compte comença amb zero, així que al primer cercle li correspon i == 0, al segon cercle i == 1 i així succesivament.
Estem fent servir el valor i per col·locar els cercles cada cop més a la dreta, donat que a cada passada el valor de i s'incrementa, per tant:
(0 * 50) + 25 retorna 25
(1 * 50) + 25 retorna 75
(2 * 50) + 25 retorna 125
(3 * 50) + 25 retorna 175
(4 * 50) + 25 retorna 225
Per assegurar-te que i existeix i està disponible per a la teva funció, l'has d'incloure com a argument a la definició d'aquesta (function(d, i)).
També hi has d'incloure d, fins i tot encara que la facis servir després ( com per exemple en el cas anterior)
A la següent línia:
.attr("cy", h/2)
h és l'alçada que té l'element SVG, h/2 que és la meitat de d'aquesta alçada, posiciona el centre dels circles a la meitat de l'alçada de l'SVG.
.attr("r", function(d) {
return d;
});
Finalment, a cada circle se li assigna un radi r de valor d, que correspont al valor de la matriu de dades per aquella passada.
Ohhh quins Colors
El color de fons i del contorn són altres atributs que pots assignar fent servir els mateixos mètodes, senzillament afegint aquest codi
.attr("fill", "yellow")
.attr("stroke", "orange")
.attr("stroke-width", function(d) {
return d/2;
});
obtenim aquest resultat (mira la demo):
Per suposat, pot barrejar i combinar atributs i personalitzar funcions per aplicar a qualsevol combinació de propietats. El truc amb la visualització de dades és, per suposat, fer servir les assignacions adequades, de tal manera que l'expressió visual de les seves dades sigui comprensible i útil per l'espectador.
Ves al següent capítol: Tipus de dades →