play with resize/drag

_.md

[ Launch: play with drag ] ae56ba447243b0c665b7 by gelicia
[ Launch: play with drag ] 3f8a8a82f6b6233e90ef by gelicia

config.json

{"description":"play with resize/drag","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},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"moveToFront.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,"thumbnail":"http://i.imgur.com/HNh5Z5h.png","inline-console":false}

inlet.js

var data = [
			{startTime:'2014-07-13T10:45:03Z', endTime: '2014-07-13T11:56:21Z'},
            {startTime:'2014-07-13T13:40:03Z', endTime: '2014-07-13T14:19:21Z'},
			{startTime:'2014-07-13T16:22:03Z', endTime: '2014-07-13T17:35:21Z'}
           ];

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

var timeMin = d3.min(data, function(d){
  var thisDate = new Date(d.startTime);
  return thisDate.setTime(thisDate.getTime() - (500000)); 
});
                                      
var timeMax = d3.max(data, function(d){
  var thisDate = new Date(d.endTime);
  return thisDate.setTime(thisDate.getTime() + (500000)); 
});
     

var margin = {top: 41, left: 10, right: 0};
var screenWidth = 627;//$("#content").width();
var chartHeight = 200;

var timeScale = d3.time.scale().domain([timeMin, timeMax])
	.range([margin.left, screenWidth - (margin.left + margin.right)]);

var colorScale = d3.scale.category20();

  var monthAxis = d3.svg.axis()
      .scale(timeScale)
      .orient('bottom')
      .ticks(d3.time.hours, 1)
      .tickFormat(d3.time.format('%I %p'))
      .tickSize(9)
      .tickPadding(4);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + chartHeight + ")")
    .call(monthAxis);

var midDrag = false;

var timeTags = svg.selectAll("g.timeTag").data(data);

var grp = timeTags.enter().append("g")
	.classed("timeTag", true)
	.attr("transform", function(d){return "translate(" + timeScale(new Date(d.startTime)) + ", 10)";})
.on("mouseover", function(d,i){
  if (!midDrag){
   d3.select("#leftResize" + i).transition().duration(250).attr("opacity", "0.5");
   d3.select("#rightResize" + i).transition().duration(250).attr("opacity", "0.5");
  }
})
.on("mouseout", function(d,i){
  if (!midDrag){
   d3.select("#leftResize" + i).transition().duration(250).attr("opacity", "0");
   d3.select("#rightResize" + i).transition().duration(250).attr("opacity", "0");
  }
})
.on("click", function(){d3.select(this).moveToFront();});

grp.append("rect").attr({
  "id": function(d,i){return "timeTagMain"+ i;},
  "class": "timeTagMain",
  height: chartHeight - 20,
  width: function(d){ return timeScale(new Date(d.endTime)) - timeScale(new Date(d.startTime));},
  'fill-opacity': 0.5,
  fill: function(d,i){ return colorScale(i);},
  'stroke-opacity': 1,
  stroke: function(d,i){ return colorScale(i);},
  'stroke-width': 2
});

grp.append("rect").attr({
  "id": function(d,i){return "leftResize"+ i;},
 "class": "leftResize",
  x: -1,
  height: chartHeight - 20,
  width: 10,
  'opacity': 0,
  fill: "white" 
});

grp.append("rect").attr({
  "id": function(d,i){return "rightResize"+ i;},
  "class": "rightResize",
  x: function(d){ return timeScale(new Date(d.endTime)) - timeScale(new Date(d.startTime))-9;},
  height: chartHeight - 20,
  width: 10,
  'opacity': 0,
  fill: "white" 
});


//move functionality
var moveOffset = 0;

var moveDrag = d3.behavior.drag()
.on("drag", function(d,i) {
  midDrag = true;
  //turn off resizing functionality
  d3.select("#leftResize" + i).attr("opacity", "0");
  d3.select("#rightResize" + i).attr("opacity", "0");
  var dis = d3.select(d3.select(this)[0][0].parentNode);
  dis.moveToFront();
  var disY = dis[0][0].transform.baseVal[0].matrix.f;
  var disX = dis[0][0].transform.baseVal[0].matrix.e;
  
  if(moveOffset === 0){
    moveOffset = d3.event.x;
  }
  
 dis.attr("transform", "translate(" + (disX + d3.event.x - moveOffset) + "," + disY + ")");
})
.on("dragend", function(d,i) {
  midDrag = false;
  moveOffset = 0;
});
moveDrag.apply(d3.selectAll("rect.timeTagMain"));


//resize drag functionality
var resizeOffset = 0;

var resizeDrag = d3.behavior.drag()
.on("drag", function(d,i) {
  midDrag = true;
  var mainTag = d3.select("#timeTagMain" + i);
  var dis = d3.select(this);
  var disGroup = d3.select(d3.select(this)[0][0].parentNode);
  disGroup.moveToFront();
  var groupX = disGroup[0][0].transform.baseVal[0].matrix.e;
  var groupY = disGroup[0][0].transform.baseVal[0].matrix.f;
   
  var leftSide = 0;
  var rightSide = 0
 
  if (dis.attr("class") == "leftResize"){  
    leftSide = groupX + d3.event.x;
    rightSide = groupX + Number(mainTag.attr("width"));
    
    d3.select("#rightResize" + i).attr("opacity", "0");
  }
  else {
    leftSide =  groupX;
    rightSide = groupX + d3.event.x;
    
    d3.select("#leftResize" + i).attr("opacity", "0");
  } 
  
  disGroup.attr("transform", "translate(" + leftSide + "," + groupY + ")");
  var tagWidth = 1
  if (rightSide-leftSide > 0){
	tagWidth = rightSide - leftSide;
  }
  
  mainTag.attr("width", tagWidth);
  d3.select("#rightResize" + i).attr("x", tagWidth-d3.select("#rightResize" + i).attr("width")+1);
  
  if(resizeOffset === 0){
    resizeOffset = d3.event.x;
  }
})
.on("dragend", function(d,i) {
  midDrag = false;
  resizeOffset = 0;
});

resizeDrag.apply(d3.selectAll("rect.leftResize"));
resizeDrag.apply(d3.selectAll("rect.rightResize"));

moveToFront.js

d3.selection.prototype.moveToFront = function() {
  return this.each(function(){
    this.parentNode.appendChild(this);
  });
};

style.css

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}