JSFiddle - React, Tailwind, and code Playground

by devgru

JavaScript

var w = 300
var h = 150
var x = d3.scale.linear().range([0, w]).domain([0, 10])
var y = d3.scale.linear().range([0, h]).domain([0, 100])

var limitsX = [0, Infinity]
var limitsY = [0, 100]

var svg = d3.select('body')
	.append('svg')
  .attr('width', w)
  .attr('height', h)
	.style('background', '#fff');
var zoom = d3.behavior.zoom()
	.x(x)
  .y(y)
	.scaleExtent([1, 24])
  .scale(3)
  .translate([-w, -h])
svg.call(zoom);
zoom.on('zoom', onzoom);

//zoom.on('zoomend', onzoom);

var data = [
	{ x: 2, y: 20, color: 'red' },
	{ x: 8, y: 20, color: 'green' },
	{ x: 2, y: 80, color: 'purple' },
	{ x: 8, y: 80, color: 'blue' },
	{ x: 5, y: 50, color: 'black' }
]

var circles = svg
	.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('r', 3)
  .attr('fill', function (d) { return d.color })
  .attr('cx', function (d) { return x(d.x) })
  .attr('cy', function (d) { return y(d.y) })

function onzoom() {
	var e = d3.event
  
	var s = zoom.scale()
  var t;

  if (x.domain()[0] < limitsX[0]) {
    t = zoom.translate();
    zoom.translate([t[0] - x(limitsX[0]) + x.range()[0], t[1]]);
  }

  if (x.domain()[1] > limitsX[1]) {
    t = zoom.translate();
    zoom.translate([t[0] - x(limitsX[1]) + x.range()[1], t[1]]);
  }

  if (y.domain()[0] < limitsY[0]) {
    t = zoom.translate();
    zoom.translate([t[0], t[1] - y(limitsY[0]) + y.range()[0]]);
  }

  if (y.domain()[1] > limitsY[1]) {
    t = zoom.translate();
    zoom.translate([t[0], t[1] - y(limitsY[1]) + y.range()[1]]);
  }

	circles
  .attr('cx', function (d) { return x(d.x) })
  .attr('cy', function (d) { return y(d.y) })
	console.log.apply(console, f([s, zoom.translate(), x.domain(), y.domain()]))
}

function f(o) {
	if (typeof o == 'object') return o.map(f)
  return parseFloat(o.toFixed(2))
}