D3 zoom behavior translate

by A B Jones

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

var svg = d3.select('svg');
var g = d3.select('g');
var translateVar = [0,0];


svg.on("click", function() {
console.log(d3.mouse(this));
var mouseCoords = d3.mouse(this)
	d3.select('#content-layer').append('circle')
  	.attr('r', 10)
    .attr('cx', mouseCoords[0] - translateVar[0] )
    .attr('cy', mouseCoords[1] - translateVar[1])
    .attr('stroke', 'black')
    .attr('fill', 'white');
});

/*g.on("click", function() {
var mouseCoords = d3.mouse(this)

	d3.select('#content-layer').append('circle')
  	.attr('r', 12)
     .attr('cx', mouseCoords[0] + translateVar[0] )
    .attr('cy', mouseCoords[1] + translateVar[1])
    .attr('stroke', 'black')
    .attr('fill', 'red');
});*/

var zoomBehavior = d3.behavior.zoom()
	.scaleExtent([1, 10])
  .on('zoom', () => {
 translateVar[0] = d3.event.translate[0];
  translateVar[1] = d3.event.translate[1];
//console.log(d3.event.translate)
  	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);