Transitions (from introduction)

Transitions.

From D3 in Depth book by Peter Cook.

forked from d3indepth's block: Transitions (from introduction)

<!DOCTYPE html>
<meta charset="utf-8">
<head>
	<title>Transitions</title>
</head>

<body>
  <h1>ajay</h1>
	<div>
		<button onClick="update();">Do transition</button>
	</div>
	<svg width="780" height="510">
	</svg>

function rnd(x) {return Math.floor(Math.random() * x);}

function update() {
	randomise();

var u = d3.select('svg')
		.selectAll('circle')
		.data(data);

// Enter
	u.enter()
		.append('circle')
		.attr('r', 0)
		.attr('cx', width / 2)
		.attr('cy', height / 2)
		.style('fill', 'white')
		.merge(u)
	  .transition()
		.duration(1500)
		.attr('cx', function(d) {return d.x;})
		.attr('cy', function(d) {return d.y;})
		.attr('r', function(d) {return d.r;})
		.style('fill', function(d) {return d.fill;});

// Exit
	u.exit()
		.transition()
		.duration(1500)
		.attr('r', 0)
	  .style('opacity', 0)
		.each('end', function() {
			d3.select(this).remove();
		});
}

update();
	</script>
</body>
</html>

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