JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>
<div id="canvas">
      <div class="basemap-controls">
        <div class="basemap-controls--row">
            
            <div class="button-basemap js-basemap-snapping" title="Toggle snapping behaviour (shift-click to snap all)">
                <i class="fa fa-magnet"></i>
            </div>
            
            <div class="button-basemap js-basemap-prev-node" title="Navigate to previous node">
                <i class="fa fa-chevron-left"></i>
            </div>
            <div class="button-basemap js-basemap-current-node" title="Navigate to current node">
                <i class="fa fa-crosshairs"></i>
            </div>
            <div class="button-basemap js-basemap-next-node" title="Navigate to next node">
                <i class="fa fa-chevron-right"></i>
            </div>
        </div>
        <div class="basemap-controls--row">
            
            <div class="button-basemap js-basemap-reorder" title="Reorder nodes">
              <i class="fa fa-reorder"></i>
            </div>

            <div class="button-basemap js-basemap-edit" title="Toggle edit mode">
                <i class="fa fa-edit"></i>
            </div>
            
            <div class="button-basemap js-basemap-zoom-in" title="Zoom in">
                <i class="fa fa-plus"></i>
            </div>
            <div class="button-basemap js-basemap-zoom-to-fit" title="Zoom to fit">
                <i class="fa fa-sitemap"></i>
            </div>
            <div class="button-basemap js-basemap-zoom-out" title="Zoom out">
                <i class="fa fa-minus"></i>
            </div>
        </div>
        </div>
  <svg class="svg canvas" width="1440" height="389" viewBox="0, 0, 1440, 389"><defs><marker id="end-arrow" refX="25" refY="25" viewBox="0 0 31.497 49.971" markerWidth="3" markerHeight="5" orient="auto"><path...

JavaScript

var zoomHandler = function() {
            if (d3.event) {
                scale = d3.event.scale;
                translation = d3.event.translate;
            }
            log('zoom Handler')
            log('transform on .panCanvas', translation, scale)
            d3.select(".panCanvas").attr("transform", "translate(" + translation + ")" + " scale(" + scale + ")");
        };


var zoom = d3.behavior.zoom()
.scaleExtent([0.1, 1])
.on("zoom.canvas", zoomHandler);