rveciana - animated-isometric-view-with-d3js

Animated isometric view with D3js

Open raw page in new tab

How to use the Isometric Blocks example with D3js to animate the blocks.

The original tutorial: A tutorial on how to render isometric blocks in the correct order

Using D3js and canvas: Working with D3.js and Canvas: When and How


<!doctype html>
<html>
<head>
	<meta charset="utf8">
	<style>
		canvas {
			background-color: #f5f5f5;
			margin-right: 5px;
			text-align: center;
			}
     </style>

	<script src='main.js'></script>
	<script src='colors.js'></script>
	<script src='block.js'></script>
	<script src='camera.js'></script>
	<script src='painter.js'></script>
	<script src='sortBlocks.js'></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
	
<canvas id='figure1b' width=350 height=200></canvas>

		<script>

			var canvas = d3.select("#figure1b");
			var context = canvas.node().getContext("2d");
			
			var detachedContainer = document.createElement("custom");
			var dataContainer = d3.select(detachedContainer);
			var t = d3.timer(function(elapsed) {
				if (elapsed > 1000) t.stop();
				drawCanvas();
				});

			function drawCustom(data) {
								
				var dataBinding = dataContainer.selectAll("custom.rect")
					.data(data, function(d) { return d; });
				
				dataBinding
					.attr("z", 0)
					.transition()
					.duration(1000)
					.attr("z", 10);

				dataBinding.enter()
					.append("custom")
					.attr("class","rect")
					.attr("x",  function(d){return d.x})
					.attr("y",  function(d){return d.dy})
					.attr("z",  function(d){return d.z})
					.attr("dx",  function(d){return d.dx})
					.attr("dy",  function(d){return d.dy})
					.attr("color", function(d){return d.color})
					.attr("dz", 0)
					.transition()
					.duration(1000)
					.attr("dz", function(d){return d.dz});
				
				dataBinding.exit()
					.attr("size", 8)
					.transition()
					.duration(1000)
					.attr("size", 5)
					.attr("fillStyle", "lightgrey");
				}

			function drawCanvas(){
				context.clearRect(0, 0, canvas.width, canvas.height);
				
				var blocks = [];
				var elements = dataContainer.selectAll("custom.rect");
				elements.each(function(d) {
					
					var node = d3.select(this);
					
					blocks.push(new IsoBlock.Block({'x': parseFloat(node.attr("x")), 'y': parseFloat(node.attr("y")),'z': parseFloat(node.attr("z"))},
					{'x':parseFloat(node.attr("dx")), 'y':parseFloat(node.attr("dy")), 'z': parseFloat(node.attr("dz"))}, IsoBlock.colors[node.attr("color")]));
					
				});
				IsoBlock.makeFigure({ canvas:'figure1b', blocks: blocks, drawPlane: false});
			};
			var ff = 'blue';
			console.info(IsoBlock.colors[ff]);
			var data = [{x:0,y:0,z:0,dx:1,dy:1,dz:3,color: 'blue'},
			{x:1,y:1,z:0,dx:1,dy:1,dz:2,color:'red'},
			{x:4,y:7,z:0,dx:2,dy:2,dz:3,color:'purple'}];
			drawCustom(data);
		</script>

</body>
</html>