tomeustace/index.html

## index.html
<!DOCTYPE html>

<head>
    <meta charset="utf-8">
</head>


<body>

    <div class="flex-container">
        <h2>D3 Move Grouped Elements on Dispatch Event</h2>
        <div id="target" class="row"></div>
    </div>

    <script src="https://d3js.org/d3.v4.min.js"></script>

    <script>
       var container = d3
    .select('div')
    .append('svg')
    .attr('width', '600')
    .attr('height', '600');

var group1 = container.append('g').attr('id','group1');
var group2 = container.append('g').attr('id','group2');
var dispatch = d3.dispatch('move');

var recta = group1.append('rect')
    .attr('fill', 'green')
    .attr('x', '10').attr('y', '10')
    .attr('width', '50').attr('height', '50');

var rectb = group1.append('rect')
    .attr('fill', 'blue')
    .attr('x', '20').attr('y', '20')
    .attr('width', '50').attr('height', '50');

var rectc = group2.append('rect')
    .attr('fill', 'orange')
    .attr('x', '30').attr('y', '30')
    .attr('width', '50').attr('height', '50');

var rectd = group2.append('rect')
    .attr('fill', 'yellow')
    .attr('x', '40').attr('y', '40')
    .attr('width', '50').attr('height', '50');

setTimeout(moveGroup1, 1000);

function moveGroup1() {
    d3.select('#group1')
      .transition()
      .duration(600)
      .attr('transform','translate(100,100)');

    dispatch.call('move');
}

dispatch.on('move', function() {
    d3.select('#group2')
      .transition()
      .duration(600)
      .attr('transform','translate(200,200)');
});


    </script>
</body>
	<!DOCTYPE html>

	<head>
	<meta charset="utf-8">
	</head>


	<body>

	<div class="flex-container">
	<h2>D3 Move Grouped Elements on Dispatch Event</h2>
	<div id="target" class="row"></div>
	</div>

	<script src="https://d3js.org/d3.v4.min.js"></script>

	<script>
	var container = d3
	.select('div')
	.append('svg')
	.attr('width', '600')
	.attr('height', '600');

	var group1 = container.append('g').attr('id','group1');
	var group2 = container.append('g').attr('id','group2');
	var dispatch = d3.dispatch('move');

	var recta = group1.append('rect')
	.attr('fill', 'green')
	.attr('x', '10').attr('y', '10')
	.attr('width', '50').attr('height', '50');

	var rectb = group1.append('rect')
	.attr('fill', 'blue')
	.attr('x', '20').attr('y', '20')
	.attr('width', '50').attr('height', '50');

	var rectc = group2.append('rect')
	.attr('fill', 'orange')
	.attr('x', '30').attr('y', '30')
	.attr('width', '50').attr('height', '50');

	var rectd = group2.append('rect')
	.attr('fill', 'yellow')
	.attr('x', '40').attr('y', '40')
	.attr('width', '50').attr('height', '50');

	setTimeout(moveGroup1, 1000);

	function moveGroup1() {
	d3.select('#group1')
	.transition()
	.duration(600)
	.attr('transform','translate(100,100)');

	dispatch.call('move');
	}

	dispatch.on('move', function() {
	d3.select('#group2')
	.transition()
	.duration(600)
	.attr('transform','translate(200,200)');
	});



	</script>
	</body>