JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/mbostock/d3/master/d3.js"></script>
<div>Why no drag???</div>
<div id="chartdiv">
    <svg id="chart" width="500" height="300">
        <rect x=.5 y=.5 width="499.5" height="299.5" fill-opacity=0 stroke="#000"/>
        <!--add circles here-->
    </svg>
</div>

JavaScript

var ps = [[10,20],[30,40],[50,60]];
    var circle = d3.select("#chart").selectAll("circle")
        .data(ps);
    circle.enter().append("svg:circle")
        .attr("r", 7.5)
        .call(d3.behavior.drag()
          .on("dragstart", function(d) {
            this.__origin__ = d.slice();
          })
          .on("drag", function(d) {
            d[0] = Math.max(0, Math.min(this.__origin__[0] += d3.event.dx, w));
            d[1] = Math.max(0, Math.min(this.__origin__[1] += d3.event.dy, h));
            update();
          })
          .on("dragend", function() {
            delete this.__origin__;
          }));
    circle
        .attr("cx", function(d) { return d[0]; })
        .attr("cy", function(d) { return d[1]; });