JSFiddle - React, Tailwind, and code Playground

by mhebrard

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>

JavaScript

var data = [{x : 200, y : 200}];
var w = 400,
    h = 400;
    
var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);
    
var drag = d3.drag()
	.on('drag', function(d){
  	d3.select(this).attr('cx', function(d){ return d.x += d3.event.dx });
    d3.select(this).attr('cy', function(d){ return d.y += d3.event.dy });   
    console.log('dragging');
  })
  .on('start', function(d){
  	console.log('drag start');
  })
  .on('end', function(d){
  	console.log('drag end');
  })
    
svg.append('rect')
  .attr('width', w)
  .attr('height', h)
  .attr('fill', '#cc99ff');
  
svg.selectAll('.node')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx', function(d){ return d.x})
  .attr('cy', function(d){ return d.y})
  .attr('r', 20)
  .attr('fill', 'black')
  .call(drag)
  .on('click', function(){
  	console.log('clicked');
  });