xoor-io

function draw(transform) {
    const scaleX = transform.rescaleX(x);
    const scaleY = transform.rescaleY(y);

    gxAxis.call(xAxis.scale(scaleX));
    gyAxis.call(yAxis.scale(scaleY));

    context.clearRect(0, 0, width, height);

    dataExample.forEach( point => {

xoor-io

function drawPoint(scaleX, scaleY, point, k) {
    context.beginPath();
    context.fillStyle = pointColor;
    const px = scaleX(point[0]);
    const py = scaleY(point[1]);

    context.arc(px, py, 1.2 * k, 0, 2 * Math.PI, true);
    context.fill();
}

xoor-io

draw(d3.zoomIdentity),

xoor-io

const zoom_function = d3.zoom().scaleExtent([1, 1000])
  .on('zoom', () => {
      const transform = d3.event.transform;
      context.save();
      draw(transform);
      context.restore();
  });

canvasChart.call(zoom_function);

xoor-io

<div class="scatter-container">
    <div class="tools">
        <button id="reset">Reset</button>
    </div>
</div>

xoor-io

.tools {
   position: absolute;
   left: calc(50% + 400px);
   visibility: hidden;
}

xoor-io

.tools {
   position: absolute;
   left: calc(50% + 400px);
   visibility: hidden;
}

xoor-io

const toolsList = container.select('.tools')
   .style('margin-top', margin.top + 'px')
   .style('visibility', 'visible');

toolsList.select('#reset').on('click', () => {
   const t = d3.zoomIdentity.translate(0, 0).scale(1);
   canvasChart.transition()
     .duration(200)
     .ease(d3.easeLinear)
     .call(zoom_function.transform, t)

xoor-io

<div class="tools">
     <button id="reset">Reset</button>
     <button id="zoom" class="active">Zoom</button>
     <button id="brush">Brush</button>
</div>

xoor-io

.tools button {
   background-color: #e7e7e7;
   border: none;
   color: #000000;
   cursor: pointer;
   display: block;
   margin-bottom: 5px;
   padding: 5px 10px;
   outline: 0;
}