JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.js"></script>

JavaScript

blocks = [
  { x: 0, y: 0 }
];

zoom_var = d3.behavior.zoom()
  .on("zoom", function(d) {
    draw(d3.event);
  });

svg = d3.select("body")
  .append("svg:svg")
  .attr("width", 600)
  .attr("height", 600)
  .call(zoom_var);

function draw(event) {
  event = event || {}
  g = svg.selectAll("g").data(blocks);
  
  gEnter = g.enter().append("g");

  g.attr("transform", function(d) {
      var translateX = event.translate[0] || 0,
          translateY = event.translate[1] || 0,
          scale = event.scale;
      return "translate("+translateX+","+translateY+")scale(" + scale + ")";
  });

  gEnter.append("rect")
    .attr("height", 100)
    .attr("width", 100);
}

draw({translate: [0, 0], scale: 1})