D3 Examples - Simple Drag Demo

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Simple Drag Demo</title>
<script src="https://d3js.org/d3.v2.js"></script>
<script src="data.js"></script>
<link type="text/css" href="drag.css" rel="stylesheet">
</head>
<body>
<svg width="960" height="500">
    <defs></defs>
    <g id="g0" transform="translate(100 150)"></g>
</svg>
<div id="report">
    x, y
</div>
​
<script>
var svg = d3.select("svg"),
    defs = d3.select("defs"),
    g0 = d3.select("#g0");
    
var squares = g0.selectAll("rect").data(square_data)
    .enter().append("rect")
        .attr("class", "square")
        .attr("width", function(d) { return d.width })
        .attr("height", function(d) { return d.height })
        .attr("transform", function(d){ return 'translate('+ [d.x, d.y] + ')' })
    
var circles = g0.selectAll("circle").data(circle_data)
    .enter().append("circle")
        .attr("r", 20)
        .attr("transform", function(d) { return 'translate('+ [d.x, d.y] + ')' })
​
var drag = d3.behavior.drag()
    .on("drag", function(d, i) {
        var dx = d3.event.dx, dy = d3.event.dy;
        d.x += dx;
        d.y += dy;
        d3.select(this).attr("transform", "translate(" + [d.x, d.y] + ")" );
        d3.select("#report") .text("x: " + (d.x) + ",  y: " + (d.y));
    }
)
circles.call(drag);
squares.call(drag);
</script>
</body>
</html>
​
    