D3 zoom behavior translate

by David Klingenberg

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<svg width="500" height="500">
  <g id="content-layer"></g>
</svg>

CSS

svg {
  background-color: grey;
}

JavaScript

$('svg').on('click', function(event) {
	d3.select('#content-layer').append('circle')
  	.attr('r', 10)
    .attr('cx', event.offsetX)
    .attr('cy', event.offsetY)
    .attr('stroke', 'black')
    .attr('fill', 'white');
});

$('g').on('click', function(event) {
	d3.select('#content-layer').append('circle')
  	.attr('r', 12)
    .attr('cx', event.offsetX)
    .attr('cy', event.offsetY)
    .attr('stroke', 'black')
    .attr('fill', 'red');
});

var zoomBehavior = d3.behavior.zoom()
	.scaleExtent([1, 10])
  .on('zoom', () => {
  	var translate = "translate(" + d3.event.translate + ")";
    var scale = "scale(" + d3.event.scale + ")";
    d3.select('#content-layer').attr("transform", translate + scale);
	});

d3.select('svg').call(zoomBehavior);