danvk · July 7, 2014 22:11
diff --git a/draggable.html b/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>