Selection and data-binding with d3.js

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.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>D3 data-binding example</title>
		<style>
			.red {
				color: red;
			}
			.green {
				color: green;
			}
		</style>
		<script src="https://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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js