[ Launch: play with drag ] ae56ba447243b0c665b7 by gelicia
[ Launch: play with drag ] 3f8a8a82f6b6233e90ef by gelicia
-
-
Save gelicia/ae56ba447243b0c665b7 to your computer and use it in GitHub Desktop.
play with resize/drag
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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")); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
d3.selection.prototype.moveToFront = function() { | |
return this.each(function(){ | |
this.parentNode.appendChild(this); | |
}); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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