Skip to content

Instantly share code, notes, and snippets.

@gelicia gelicia/_.md

Last active Aug 29, 2015
Embed
What would you like to do?
play with resize/drag
{"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}
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"));
d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
};
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.