Skip to content

Instantly share code, notes, and snippets.

@shobhitg

shobhitg/README.md

Created June 10, 2016 07:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shobhitg/aeff0a3e1df1c189f1fe97e425a979a3 to your computer and use it in GitHub Desktop.
Save shobhitg/aeff0a3e1df1c189f1fe97e425a979a3 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see!
// var svg = d3.select("body").append("svg")
// svg.append("rect")
// .attr({x: 100, y: 10, width: 700, height: 480})
// .style({ fill: "#a72d1a"})
// .transition().duration(3000).ease("bounce")
// .style({ fill: "#5db9e3"})
var w = 750,
h = 450,
r = 120;
var isXChecked = true,
isYChecked = true;
var width = 300,
height = 200,
dragbarw = 20;
var drag = d3.behavior.drag()
.origin(Object)
.on("drag", dragmove);
var dragright = d3.behavior.drag()
.origin(Object)
.on("drag", rdragresize);
var dragleft = d3.behavior.drag()
.origin(Object)
.on("drag", ldragresize);
var dragtop = d3.behavior.drag()
.origin(Object)
.on("drag", tdragresize);
var dragbottom = d3.behavior.drag()
.origin(Object)
.on("drag", bdragresize);
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h)
var newg = svg.append("g")
.data([{x: width / 2, y: height / 2}]);
var dragrect = newg.append("rect")
.attr("id", "active")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("height", height)
.attr("width", width)
.attr("fill-opacity", .5)
.attr("cursor", "move")
.call(drag);
var dragbarPort1 = newg.append("rect")
.attr("x", function(d) { return d.x - (dragbarw/2); })
.attr("y", function(d) { return d.y + (dragbarw/2); })
.attr("height", height - dragbarw)
.attr("id", "dragleft")
.attr("width", dragbarw)
.attr("fill", "lightblue")
.attr("fill-opacity", .5)
.attr("cursor", "ew-resize")
.call(dragleft);
var dragbarright = newg.append("rect")
.attr("x", function(d) { return d.x + width - (dragbarw/2); })
.attr("y", function(d) { return d.y + (dragbarw/2); })
.attr("id", "dragright")
.attr("height", height - dragbarw)
.attr("width", dragbarw)
.attr("fill", "lightblue")
.attr("fill-opacity", .5)
.attr("cursor", "ew-resize")
.call(dragright);
var dragbartop = newg.append("rect")
.attr("x", function(d) { return d.x + (dragbarw/2); })
.attr("y", function(d) { return d.y - (dragbarw/2); })
.attr("height", dragbarw)
.attr("id", "dragleft")
.attr("width", width - dragbarw)
.attr("fill", "lightgreen")
.attr("fill-opacity", .5)
.attr("cursor", "ns-resize")
.call(dragtop);
var dragbarbottom = newg.append("rect")
.attr("x", function(d) { return d.x + (dragbarw/2); })
.attr("y", function(d) { return d.y + height - (dragbarw/2); })
.attr("id", "dragright")
.attr("height", dragbarw)
.attr("width", width - dragbarw)
.attr("fill", "lightgreen")
.attr("fill-opacity", .5)
.attr("cursor", "ns-resize")
.call(dragbottom);
function dragmove(d) {
if (isXChecked) {
dragrect
.attr("x", d.x = Math.max(0, Math.min(w - width, d3.event.x)))
dragbarleft
.attr("x", function(d) { return d.x - (dragbarw/2); })
dragbarright
.attr("x", function(d) { return d.x + width - (dragbarw/2); })
dragbartop
.attr("x", function(d) { return d.x + (dragbarw/2); })
dragbarbottom
.attr("x", function(d) { return d.x + (dragbarw/2); })
}
if (isYChecked) {
dragrect
.attr("y", d.y = Math.max(0, Math.min(h - height, d3.event.y)));
dragbarleft
.attr("y", function(d) { return d.y + (dragbarw/2); });
dragbarright
.attr("y", function(d) { return d.y + (dragbarw/2); });
dragbartop
.attr("y", function(d) { return d.y - (dragbarw/2); });
dragbarbottom
.attr("y", function(d) { return d.y + height - (dragbarw/2); });
}
}
function ldragresize(d) {
if (isXChecked) {
var oldx = d.x;
//Max x on the right is x + width - dragbarw
//Max x on the left is 0 - (dragbarw/2)
d.x = Math.max(0, Math.min(d.x + width - (dragbarw / 2), d3.event.x));
width = width + (oldx - d.x);
dragbarleft
.attr("x", function(d) { return d.x - (dragbarw / 2); });
dragrect
.attr("x", function(d) { return d.x; })
.attr("width", width);
dragbartop
.attr("x", function(d) { return d.x + (dragbarw/2); })
.attr("width", width - dragbarw)
dragbarbottom
.attr("x", function(d) { return d.x + (dragbarw/2); })
.attr("width", width - dragbarw)
}
}
function rdragresize(d) {
if (isXChecked) {
//Max x on the left is x - width
//Max x on the right is width of screen + (dragbarw/2)
var dragx = Math.max(d.x + (dragbarw/2), Math.min(w, d.x + width + d3.event.dx));
//recalculate width
width = dragx - d.x;
//move the right drag handle
dragbarright
.attr("x", function(d) { return dragx - (dragbarw/2) });
//resize the drag rectangle
//as we are only resizing from the right, the x coordinate does not need to change
dragrect
.attr("width", width);
dragbartop
.attr("width", width - dragbarw)
dragbarbottom
.attr("width", width - dragbarw)
}
}
function tdragresize(d) {
if (isYChecked) {
var oldy = d.y;
//Max x on the right is x + width - dragbarw
//Max x on the left is 0 - (dragbarw/2)
d.y = Math.max(0, Math.min(d.y + height - (dragbarw / 2), d3.event.y));
height = height + (oldy - d.y);
dragbartop
.attr("y", function(d) { return d.y - (dragbarw / 2); });
dragrect
.attr("y", function(d) { return d.y; })
.attr("height", height);
dragbarleft
.attr("y", function(d) { return d.y + (dragbarw/2); })
.attr("height", height - dragbarw);
dragbarright
.attr("y", function(d) { return d.y + (dragbarw/2); })
.attr("height", height - dragbarw);
}
}
function bdragresize(d) {
if (isYChecked) {
//Max x on the left is x - width
//Max x on the right is width of screen + (dragbarw/2)
var dragy = Math.max(d.y + (dragbarw/2), Math.min(h, d.y + height + d3.event.dy));
//recalculate width
height = dragy - d.y;
//move the right drag handle
dragbarbottom
.attr("y", function(d) { return dragy - (dragbarw/2) });
//resize the drag rectangle
//as we are only resizing from the right, the x coordinate does not need to change
dragrect
.attr("height", height);
dragbarleft
.attr("height", height - dragbarw);
dragbarright
.attr("height", height - dragbarw);
}
}
console.log("you are now rocking with d3", d3);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment