Block_drop_down_stacking

inlet.js

//Click on a column to drop down a block. Stack by dropping down multiple blocks in the same column.

//You can change the width, height and the amount of columns below.
var width = 500;
var height = 500;
var amount = 10;



var data = [];
var dataPlaced = [];
var intervalW = width/amount;
var intervalH = height/amount;
var indicator;
var placed;

for (i=0;i<amount;i++){
  for (j=0;j<amount;j++){
    data.push([i*intervalW,j*intervalH]);
  }
}

for (i=0;i<amount;i++){
  dataPlaced.push([i*intervalW,(amount*intervalH)]);
}

var canvas = d3.select("svg");

var g = canvas.append("g")
.attr("width",width)
.attr("height",height)
.attr("transform","translate(50,100)")

var rects = g.selectAll("rect")
.data(data)
.enter()
.append("rect")

rects
.attr("width",width/amount)
.attr("height",height/amount)
.attr("x",function(d){return d[0]})
.attr("y",function(d){return d[1]})
.attr("rx",7)
.attr("fill","#ebf3f9")
.attr("stroke","#470000")

rects.on("mouseover",function(d){
  indicator = g.append("rect")
	.attr("width",width/amount)
	.attr("height",height/amount)
	.attr("x",d[0])
	.attr("y",-height/amount)
	.attr("rx",7)
	.attr("fill","#b0cfe7")
	.attr("stroke","#000147")
})

rects.on("mouseout",function(d){
  indicator.remove();
})

rects.on("click",function(d,i){
	var newPos = GetPos(d[0]);
	
  if(newPos >=0){
    placed = g.append("rect")
	.attr("width",width/amount)
	.attr("height",height/amount)
	.attr("x",d[0])
	.attr("y",-height/amount)
	.attr("rx",7)
	.attr("fill","#377db3")
	.attr("stroke","#000147")
    .transition()
    .attr("y",newPos)
    .attr("pointer-events","none");
  } 
})


function GetPos(x){
  var result;
   for (var i = 0; i < dataPlaced.length; i++) {
		if(i*intervalW === x){
			result = dataPlaced[i][1]-intervalH;
          if(result>=0){
            dataPlaced[i][1] = result;
          }
		}
	} 
  return result;
}