JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>
<body>
    <div class="graph"></div>
</body>

CSS

.starter-elm {
    fill: red;
}

JavaScript

var $graph = $(".graph");
var $window = $(window);
var SVGWidth = $window.outerWidth();
var SVGHeight = $window.outerHeight() - 55;

// Compute data
var nodes = [{x: 15, y: 5}, {x: 20, y: 40}, {x: 50, y: 10}];

// Dummy data
ELEMENT_INFOS = {undefined: {w: 30, h: 30}};

// Empty graph content
$graph.empty();

// Create SVG
var svg = d3.select(".graph").append("svg:svg")
.attr("width", SVGWidth)
.attr("height", SVGHeight);

// Container parent
var containerParent = svg.append("g")
    .attr("transform", "translate(50, 50)")
    .call(d3.behavior.zoom()
      .scaleExtent([0.5, 10])
      .on("zoom", function() {
          container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
      })
     );


// Add rectangle for pan handlers
containerParent.append("rect")
    .attr("width", SVGWidth)
    .attr("height", SVGHeight)
    .style("fill", "none")
    .style("pointer-events", "all");


// Add starter elements and their container
var starterElmsParent = containerParent.append("g");
var StarterElmsDrag = d3.behavior.drag().on("drag", function (d) {
        
        //d3.event.sourceEvent.stopPropagation();
        console.log(">drag");
        d.x = d3.event.x - 30 / 2;
        d.y = d3.event.y - 30 / 2;
        
        d3.select(this).attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        });
        
    })
    .origin(function(d) {
        var t = d3.select(this);
        return {
            x: 30 / 2 + d3.transform(t.attr("transform")).translate[0],
            y: 30 / 2 + d3.transform(t.attr("transform")).translate[1]
        };
    });


var starterElms = starterElmsParent.selectAll("g")
.data([{}, {}, {}])
    .enter()
    .append("g")
    .attr("class", function (d) {
        return "starter-elm";
    })
    .attr("transform", function (d, i) {
        d.x = SVGWidth - 120;
        d.y = (i + 1) * 40;
        return "translate(" + d.x + "," + d.y + ")";
   ...