Skip to content

Instantly share code, notes, and snippets.

@fritzvd
Forked from couchand/index.html
Last active October 30, 2015 11:13
Show Gist options
  • Save fritzvd/e4724b5d0e9de21924b5 to your computer and use it in GitHub Desktop.
Save fritzvd/e4724b5d0e9de21924b5 to your computer and use it in GitHub Desktop.
Draggable clip path - forked
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.min.js"></script>
</head>
<body>
<div id="chart">
</div>
<script type="text/javascript">
var w = 800,
h = 600,
margin = 25;
var drag = d3.behavior.drag()
.on("drag", function() {
var clippy = d3.select('#clip circle');
clippy.attr('cx', +clippy.attr('cx') + d3.event.dx);
clippy.attr('cy', +clippy.attr('cy') + d3.event.dy);
});
var svg = d3.select("#chart")
.append("svg:svg")
.attr("width", w + 2*margin)
.attr("height", h + 2*margin)
.append('g')
.attr('transform', 'translate('+margin+','+margin+')');
var clip = svg.append('svg:defs').append("svg:clipPath")
.attr("id", "clip")
.append("svg:circle")
.attr('cx', w/2)
.attr('cy', h/2)
.attr('r', 30);
var g = svg.append('g')
.attr("clip-path", function(d,i) { return "url(#clip)"; })
g.append('svg:rect')
.attr('width', w)
.attr('height', h)
.attr('rx', 15)
.attr('ry', 15)
.style("fill", d3.rgb(230, 230, 230))
.style("stroke", d3.rgb(150, 150, 150))
.call(drag);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment