Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
57 lines (46 sloc) 1.24 KB
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
svg {
border: solid 1px #aaa;
}
</style>
</head>
<body>
<script type="text/javascript" src="../../d3.v2.js"></script>
<script type="text/javascript">
var width = 960,
height = 500,
radius = 120;
var drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", dragstart)
.on("drag", dragmove)
.on("dragend", dragend);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
var circle = svg.selectAll("circle")
.data([1 / 3, 2 / 3])
.enter().append("circle")
.datum(function(d) { return {x: width * d, y: height / 2}; })
.attr("r", radius)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.call(drag);
function dragstart() {
d3.select(this).style("fill", "red");
}
function dragmove(d) {
d3.select(this)
.attr("cx", d.x = Math.max(radius, Math.min(width - radius, d3.event.x)))
.attr("cy", d.y = Math.max(radius, Math.min(height - radius, d3.event.y)));
}
function dragend() {
d3.select(this).style("fill", null);
}
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.