click boxes

_.md

[ Launch: click boxes ] 5991954 by georules

config.json

{"description":"click boxes","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/Kqeyxcs.png"}

inlet.js

var boxdata = [
  {x:100,y:200,boxsize:50,id:200,color:"#00cc00"},
   {x:100,y:313,boxsize:50,id:201,color:"#00cc00"}
];

boxsize = 50;
var id=0;

drag1 = d3.behavior.drag()       
  .on("drag", function(d,e) {
    toggle=false;
    d.y = d3.event.y;
    d.x = d3.event.x;
    console.log(e)
    refresh(this,d);
  })
.on("dragend",function(d) {
  toggle=true;
});

svg = d3.select("svg");
svg.on("click", function(d,i) {
  m = d3.mouse(this);
  x = m[0], y = m[1];
  var b = {x:x,y:y,boxsize:boxsize,id:id++,color:"#D83A3A"};
  boxdata.push(b);
  update();
  refresh();
});

function refresh() {
  svg.selectAll("rect").
  attr("width",function(d) {return d.boxsize})
  .attr("height",function(d) {return d.boxsize})
  .attr("x",function (d){ return d.x-(d.boxsize/2)})
  .attr("y",function (d) { return d.y-(d.boxsize/2)})
  .style("fill",function(d) {return d.color;})
  
  texts = svg.selectAll("text")
  .text(function(d){return ("hi"+d.id)})
  .attr("x", function(d) { return d.x; })
  .attr("y", function(d) { return d.y; })
  .attr("font-family", "sans-serif")
  .attr("font-size", "20px")
  .attr("fill", "black");
}

function update() {
  svg.selectAll("rect")
  .data(boxdata)
  .enter()
  .append("rect")
  .call(drag1);
  
 svg.selectAll("text")
  .data(boxdata)
  .enter().append("text")
 
}

update()
refresh()