simple bar drag

_.md

[ Launch: simple bar drag ] 9752188 by enjalot

config.json

{"description":"simple bar drag","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true}

inlet.js

var data = [ 10, 20, 15, 50, 70, 25 ]

var xscale = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeBands([100, 400], 0.5)

var yscale = d3.scale.linear()
.domain([0, 100])
.range([200, 1])

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

var rects = svg.selectAll("rect")
.data(data)

rects.enter()
.append("rect")
.attr({
  width: xscale.rangeBand()/2
  , height: function(d) { return 200 - yscale(d) }
  , x: function(d,i) { return xscale(i) }
  , y: function(d,i) { return yscale(d) }
})
.on("click", function(d,i) {
  console.log(d);
  rects.style("fill", "black")
  d3.select(this).style("fill", "red");
})

update = function(data) {
  var rects = svg.selectAll("rect")
  .data(data)
  .attr({
    width: xscale.rangeBand()/2
    , height: function(d) { return 200 - yscale(d) }
    , x: function(d,i) { return xscale(i) }
    , y: function(d,i) { return yscale(d) }
  })
  
}

var drag = d3.behavior.drag()
.on("drag", function(d,i) {
  var dis = d3.select(this)
  dis.attr("x", +dis.attr("x") + d3.event.dx)
})
.on("dragend", function(d,i) {
  var dis = d3.select(this);
  var x = +dis.attr("x");
  var newIndex = invert(xscale, x)
  console.log(newIndex)
  var data = rects.data()
  console.log(data)
  if(newIndex > i) {
    data.splice(newIndex, 0, d)
    data.splice(i, 1)
  } else {
    data.splice(i, 1)
    data.splice(newIndex, 0, d)
  }
  update(data);
  
})
drag.apply(rects)

function invert(scale, x) {
  var leftEdges = scale.range();
  var width = scale.rangeBand();
  var j;
  for(j=0; x > (leftEdges[j] + width/2); j++) {}
  return j;
}