JSFiddle - React, Tailwind, and code Playground

by gamea12

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

JavaScript

var drag = d3.behavior.drag()
  .on("drag", function(d, i) {
    d.x += d3.event.dx
    d.y += d3.event.dy
    d3.select(this).attr("transform", function(d, i) {
      return "translate(" + [d.x, d.y] + ")"
    })
  });

var w = 700;
var h = 400;
var nodes=[
{x:1,y:1}.{x:2,y:2}
]

//setup svg canvas
var svg = d3.select("body")
  .append("svg:svg")
  .attr("width", w)
  .attr("height", h)
  .attr("id", "charts");

var rect = svg.selectAll(".nodes")
        .data(nodes)
        .enter().append("circle")
        .attr("class", "nodes")
        .attr("cx", function (d) {
            return xRange(d.x);
        })
        .attr("cy", function (d) {
            return yRange(d.y);
        })
        .attr("r", "7px")
        .attr("fill", "black")
        .attr("transform", function (p) {
            return "translate(" + p.x + "," + p.y + ")";
        })
        .call(drag);