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 contentLayer = d3.select('#content-layer');

var translateVar = [0, 0];
var scaleVar = 1;


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


var zoomBehavior = d3.behavior.zoom()
  .scaleExtent([1, 10])
  .on('zoom', () => {
    translateVar[0] = d3.event.translate[0];
    translateVar[1] = d3.event.translate[1];
    scaleVar = d3.event.scale

    var translate = "translate(" + d3.event.translate + ")";
    var scale = "scale(" + d3.event.scale + ")";
    contentLayer.attr("transform", translate + scale);
  });

svg.call(zoomBehavior);