Desplegar els divs
És hora de començar a dibuixar amb les dades.
Continuem treballant amb la nostra petita matriu de dades de l'últim capítol:
var dataset = [ 5, 10, 15, 20, 25 ];
El farem servir per generar un diagrama de barres.
Els diagrames de barres, són bàsicament rectangles, i un <div> de HTML és la manera més senzilla de dibuixar un rectangle. (Bé, per a un navegador web tot és un rectangle, per tant podries adapar fácilment aquest exemple fent servir spans o qualsevol altre element que volguesis.)
Aquest div el farem servir com la barra que representa una dada:
<div style="display: inline-block;
width: 20px;
height: 75px;
background-color: teal;"></div>
(Entre la gent que fa els estandards webs, això es coneix com un "semantic no-no". Normalment, hom no pot fer servir un div buit per efectes purament visuals, encara que el codi del tutorials són una notable excepció.)
Degut a que és un div, la seva amplada width i la seva alçada height es defineixen amb estils CSS. Cada barra del nostre diagrama tindrà les mateixes característiques visuals ( excepte per l'alçada), així que posarem les característiques comuns en una classe que anomenarem bar:
div.bar {
display: inline-block;
width: 20px;
height: 75px; /* We'll override this later */
background-color: teal;
}
Ara cada div necessita ser assignat a una classe bar, per tal que se li apliqui l'estil CSS que hem definit. Si estiguessis escrivint el codi HTML a ma, escriuries això:
<div class="bar"></div>
Amb D3, per afegir una classe a un element, farem servir el mètode selection.attr(). És important entendre la diferència entre attt() i el seu cosí germà, style().
Definint atributs
attr() es fa servir per definir el valor que un atribut HTML tinrà per a un element. Un atribut HTML és qualsevol parell clau/valor que puguis incloure entre els símbols < >. Per exemple, aquests elements HTML
<p class="caption">
<select id="country">
<img src="logo.png" width="100px" alt="Logo" />
tenen un total de 5 atributs ( amb els seus corresponents valors), i tots ells poden ser assignats amb attr()
class | caption
id | country
src | logo.png
width | 100px
alt | Logo
Per assignar als nostres div la classe bar, podem fer servir:
.attr("class", "bar")
Un apunt sobre les Classes
Tingues en compte que la classe d'un element HTML és guarda com un atribut. La classe, al seu torn, es fa servir com a referència per assignar les regles d'estil de CSS. Això pot provocar algun tipus de confusió perque hi ha una diferència entre assignar una classe ( a partir de la qual s'obtenen les regles d'estil) i aplicar un estil directament a un element. Pots fer ambdues coses amb D3. Fes servir el que millor s'adapti al resultat que vols aconseguir.
Com a regla general, et recomano fer servir les classes per les propietats que són compartides entre multiples elements, i aplicar les regles d'estil directe únicament als elements que es desviin de la norma. (De fet, això és el que farem d'aquí a uns instants).
També aprofito per a fer una petita menció d´un altre mètode de D3 classed(), que es pot fer servir per aplicar o treure de manera ràpida un element d'una classe. El codi anterior es podria haver escrit de la segënt manera:
.classed("bar", true)
Tornant a les barres
Posem-ho tot plegat. Aquest és el codi D3 complet:
var dataset = [ 5, 10, 15, 20, 25 ];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar");
Mira el codi en aquesta pàgina de demostració. Obre el codi font i l'inspector web del teu navegador per veure què està passant. Hauries de veure 5 barres verticals, una per cadascuna de les dades de la matriu, tot i que, sense espais entre elles i del mateix color, semblen més aviat un gran rectangle.
Assignant Estils
El mètode style() es fa servir per aplicar directament una propietat de CSS o el seu valor a un element HTML . És equivalent a incloure regles CSS dins de l'atribut style directament a l'arxiu HTML, tal com això:
<div style="height: 75px;"></div>
En un diagrama de barres, l'alçada de cada barra ha de ser el valor de les dades. Això, com ja sabem necessita una funció anònima. Així que afegim-la al final del nostre codi D3.
.style("height", function(d) {
return d + "px";
});
Mira aquesta demo amb el codi.Veuràs un petitíssim diagrama de barres.
Cada passada que fa D3 pel bucle de la matriu de dades, el valor que s'assigna a d, és el que ocupa la posició del mateix ordinal, ( primera passada, primer valor,... quarta passada, quart valor). Per tant li estem assignant a la propietat height el valor de d (el de cada passada) i li afegim px ( per especificar que les unitats son píxels). L'alçada resultant és doncs: 5px, 10px, 15px, 20px i 25px.
Així sembla molt poca cosa. Fem les barres més altes.
.style("height", function(d) {
var barHeight = d * 5; //Escalem cinc vegades les barres
return barHeight + "px";
});
i afegim un petit espai entre barra i barra
margin-right: 2px;
Xulo! Podríem anar al SIGGRAPH amb aquest diagrama.
Aquí hi ha la pàgina demo final amb aquest codi. Un altra vegada, mira el codi font i fes servir l'inspector web del teu navegador, per contrastar l'arxiu HTML original amb el DOM final.