JSFiddle - React, Tailwind, and code Playground

by Ronny Amarante

HTML

<body>
    <svg width="400" height="400"></svg>
	  <script src="http://d3js.org/d3.v3.min.js"></script>
</body>

JavaScript

var in_editor_drag = d3.behavior.drag()
             .origin(function() {
                var g = this.parentNode;
                return {x: d3.transform(g.getAttribute("transform")).translate[0],
                        y: d3.transform(g.getAttribute("transform")).translate[1]};
            })
            .on("drag", function(d,i) {

                g = this.parentNode;
                translate = d3.transform(g.getAttribute("transform")).translate;
                x = d3.event.dx + translate[0],
                y = d3.event.dy + translate[1];
                d3.select(g).attr("transform", "translate(" + x + "," + y + ")");
                d3.event.sourceEvent.stopPropagation();
            });

svg = d3.select("svg");
d = {x: 20, y: 20 };
groups = svg
        .append("g")
        .attr("transform", "translate(20, 20)");

groups
    .append("rect")
        .attr("x", 0)
        .attr("y", 0)
        .attr("width", 100)
        .attr("height", 100)
        .style("fill", "green")
        .call(in_editor_drag)
        .style("opacity", 0.4);