52 строки
1.1 KiB
HTML
52 строки
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
|
|
svg {
|
|
border: solid 1px #aaa;
|
|
}
|
|
|
|
</style>
|
|
<body>
|
|
<script src="../../d3.js"></script>
|
|
<script>
|
|
|
|
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>
|