D3 V4 - PAN - ZOOM BUTTONS

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
  <g class="zoom-controls" transform="translate(10, 10)">
    <g id="zoom-in" transform="translate(0, 0)">
      <rect width="30" height="30"></rect>
      <line x1="5" y1="15" x2="25" y2="15"></line>
      <line x1="15" y1="5" x2="15" y2="25"></line>
    </g>
    <g id="zoom-out" transform="translate(30, 0)">
      <rect width="30" height="30"></rect>
      <line x1="5" y1="15" x2="25" y2="15"></line>
    </g>
<!--
-->    
    <g id="zoom-all" transform="translate(60, 0)">
      <rect width="30" height="30"></rect>
      <line x1="5" y1="15" x2="25" y2="15"></line>
      <line x1="10" y1="15" x2="25" y2="15"></line>
    </g>
  </g>
</svg>

CSS

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
circle {
  opacity: 0.7;
}
g.zoom-controls {
    cursor: pointer;
    pointer-events: all;
}
g.zoom-controls rect {
    fill: white;
    stroke: #596877;
    stroke-width: 1;
}
g.zoom-controls line {
    stroke: #596877;
    stroke-width: 2;
}

JavaScript

var radius = 10;
var svg = d3.select('svg');  
var dimension = document.body.getBoundingClientRect();

var data = d3.range(0, 25).map(function() {
	return {
    x: getRandom(radius, dimension.width - radius),
    y: getRandom(radius, dimension.height - radius)
  }
});



var canvas = svg
	.attr('width', dimension.width)
  .attr('height', dimension.height)
  .call(zoom)
  .insert('g', ':first-child');
canvas.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('r', radius)
  .attr('cx', function(d) {
    return d.x;
  }).attr('cy', function(d) {
    return d.y;
  }).style('fill', function() {
    return d3.schemeCategory10[getRandom(0, 9)]
  });

d3.select('#zoom-in').on('click', function() {
  // Smooth zooming
	zoom.scaleBy(svg.transition().duration(750), 1.3);
});

d3.select('#zoom-out').on('click', function() {
  // Ordinal zooming
  zoom.scaleBy(svg, 1 / 1.3);
});


function getRandom(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}