This example show the use of the selection and the data-binding (or data-join) with D3.js. The selection operation permits to select one or more DOM objects. The data-binding is a particular type of selection that binds DOM objects selected to an array of data. These examples have been created using the information contained at the D3.js join page.
Last active
August 29, 2015 14:11
-
-
Save cartoda/4f22993da21954cd85bd to your computer and use it in GitHub Desktop.
Selection and data-binding with d3.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>D3 data-binding example</title> | |
| <style> | |
| .red { | |
| color: red; | |
| } | |
| .green { | |
| color: green; | |
| } | |
| </style> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var dataArray = []; | |
| var dimensioneTesto = 12; | |
| var selection; | |
| function redraw(){ | |
| // Update the data array | |
| selection = d3.select("body").selectAll("p") | |
| .data(dataArray); | |
| // Enter selection (set immutable attributes) | |
| selection | |
| .enter() | |
| .append("p") | |
| .text(function(d, i) { | |
| return "Paragraph " + (i + 1) | |
| }) | |
| .attr("class", function(d, i) { | |
| return i % 2 ? "red" : "green"; | |
| }); | |
| // Update selection (set mutable attributes) | |
| selection.style("font-size", function(d) { | |
| return d + "px"; | |
| }); | |
| // Exit selection | |
| selection.exit().remove(); | |
| } | |
| function raddoppia(){ | |
| dataArray.forEach(function(value, index){ | |
| dataArray[index] = value * 2; | |
| }); | |
| dimensioneTesto = dimensioneTesto * 2; | |
| redraw(); | |
| } | |
| function dimezza(){ | |
| dataArray.forEach(function(value, index){ | |
| dataArray[index] = value / 2; | |
| }); | |
| dimensioneTesto = dimensioneTesto / 2; | |
| redraw(); | |
| } | |
| // La selection.enter() seleziona tutti i valori in [data] che non hanno il corrispondente nodo nella selezione | |
| // Se non si mette enter() invece verranno selezionati solo quelli che ce l'hanno | |
| function aggiungi(){ | |
| //Aggiorna l'array di dati aggiungendo la dimensione in px che dovrà avere il paragrafo | |
| dataArray.push(dimensioneTesto); | |
| //Incrementa la dimensione in px che dovrà avere il prossimo paragrafo (8 px in più rispetto all'ultimo inserito) | |
| dimensioneTesto = dimensioneTesto + 8; | |
| // Aggiorna la variabile contenente la nuova selezione e setta il background e lo stile | |
| redraw(); | |
| } | |
| function elimina(){ | |
| if(dataArray.length <=0){ | |
| return; | |
| } | |
| //Aggiorna l'array di dati eliminando la dimensione in px dell'ultimo paragrafo | |
| dataArray.pop(); | |
| //Incrementa la dimensione in px che dovrà avere il prossimo paragrafo (8 px in più rispetto all'ultimo inserito) | |
| dimensioneTesto = dimensioneTesto - 8; | |
| //Aggiorna l'array di dati della selezione col nuovo arrayn ed elimina l'ultimo nodo inserito(exit() rimuove i nodi che non hanno un corrispondente dato, perciò l'ultimo eliminato) | |
| redraw(); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <br /><br /> | |
| <div id="controls"> | |
| <button onclick="aggiungi()">Add a paragraph</button> | |
| <button onclick="elimina()">Delete last paragraph</button> | |
| <button onclick="raddoppia()">Double the size of the text</button> | |
| <button onclick="dimezza()">Halve the size of the text</button> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment