danvk/draggable.html

## draggable.html
<!DOCTYPE html>
<title>d3.behavior.drag test</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<style>
circle { fill-opacity: 0.5; }
.c-Bob { fill: red; }
.c-Raven { fill: black; }
.c-Dan { fill: blue; }
.c-Adrian { fill: orange; }
</style>

<body>

<script>

var width = 800,
    height = 600;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var data = [
  {name: 'Bob', val: 10},
  {name: 'Raven', val: 20},
  {name: 'Dan', val: 30},
  {name: 'Adrian', val: 40}
];
data.forEach(function(d) { d.dx = 0; d.dy = 0; });

function transform(d) {
  return 'translate(' + [d.dx,d.dy] + ')';
}

var drag = d3.behavior.drag()
  .on('drag', function(d, i) {
      d.dx += d3.event.dx;
      d.dy += d3.event.dy;
      d3.select(this).attr('transform', transform);
  });

svg.selectAll('circle')
  .data(data)
  .enter().append('g')
    .attr('class', 'draggable')
    .attr('tranform', transform)
    .append('circle')
      .attr('class', function(d) { return 'c-' + d.name })
      .attr('cx', function(d, i) { return 150 * (i + 1); })
      .attr('cy', 300)
      .attr('r', function(d) { return 2 * d.val; })
      ;

svg.selectAll('.draggable').call(drag);

</script>

</body>
	<!DOCTYPE html>
	<title>d3.behavior.drag test</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

	<style>
	circle { fill-opacity: 0.5; }
	.c-Bob { fill: red; }
	.c-Raven { fill: black; }
	.c-Dan { fill: blue; }
	.c-Adrian { fill: orange; }
	</style>

	<body>

	<script>

	var width = 800,
	height = 600;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var data = [
	{name: 'Bob', val: 10},
	{name: 'Raven', val: 20},
	{name: 'Dan', val: 30},
	{name: 'Adrian', val: 40}
	];
	data.forEach(function(d) { d.dx = 0; d.dy = 0; });

	function transform(d) {
	return 'translate(' + [d.dx,d.dy] + ')';
	}

	var drag = d3.behavior.drag()
	.on('drag', function(d, i) {
	d.dx += d3.event.dx;
	d.dy += d3.event.dy;
	d3.select(this).attr('transform', transform);
	});

	svg.selectAll('circle')
	.data(data)
	.enter().append('g')
	.attr('class', 'draggable')
	.attr('tranform', transform)
	.append('circle')
	.attr('class', function(d) { return 'c-' + d.name })
	.attr('cx', function(d, i) { return 150 * (i + 1); })
	.attr('cy', 300)
	.attr('r', function(d) { return 2 * d.val; })
	;

	svg.selectAll('.draggable').call(drag);

	</script>

	</body>