JSFiddle - React, Tailwind, and code Playground

by Vladyslav Babenko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.js"></script>

CSS

.overlay {
  fill: red;
  pointer-events: all;
}

body {
  overflow: hidden;
}

JavaScript

var width = 300;
var height = 300;

var svg = d3.select("body")
		.append("svg")
			.attr('id', 'svg')
    	.attr("width", width)
    	.attr("height", height);

var g = svg.append("g")
  	.attr('id', 'test');
      
var content = g.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height);

var zoom = d3.zoom()
	.on("zoom", zoomed);
    
svg.call(zoom);

function zoomed() {
  g.attr('transform', `translate(${d3.event.transform.x}, ${d3.event.transform.y}) scale(${d3.event.transform.k})`);
}

function transform() {
  return d3.zoomIdentity
      .translate(width / 2, height / 2)
      .scale(1.1);
}

g.transition()
  .delay(0)
  .duration(0)
  .call(zoom.transform, transform);