JSFiddle - React, Tailwind, and code Playground

by Gabriel Z

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="MainDiv">

JavaScript

function onDragDrop(dragHandler, dropHandler) {
    var drag = d3.behavior.drag();
    drag.on("drag", dragHandler).on("dragstart", startHandler).on("dragend", dropHandler);
    return drag;
}
function startHandler() {
    d3.select(this).style('cursor', 'move');
}
function dropHandler(d) {
    //Finished
}
function dragmove(d) {
    d.x += d3.event.dx;
    d.y += d3.event.dy;
    movex = Math.round(d.x / 50) * 50;
    movey = Math.round(d.y / 50) * 50;
    d3.select(this).attr("transform", "translate(" + movex + "," + movey + ")");
}
var DrawCircle = function(container) {
    var d = [{ x: 50, y: 50 }];
    var circle = container.data(d).append("g").attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }).call(onDragDrop(dragmove, dropHandler));
    circle.append("ellipse").attr("cx", 20).attr("cy", 20).attr("rx", 20).attr("ry", 20).attr("stroke", "#FF0000").attr("stroke-width", 1).attr("fill", "#FF0000");
}
d3.selectAll("svg").remove();
var svgContainer = d3.select("#MainDiv").append("svg").attr("width", 800).attr("height", 600).attr("version", 1.1).attr("xmlns", "http://www.w3.org/2000/svg").attr("viewBox", "-40, -40, 1600, 1200");
DrawCircle(svgContainer);