JSFiddle - React, Tailwind, and code Playground

by A B Jones

HTML

<script src="https://d3js.org/d3.v3.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.behavior.drag()
	.origin(function(d){return d})
  .on('dragstart', function(d){
    d3.event.sourceEvent.stopPropagation();
  	console.log('drag start');
  })
  .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('dragend', 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')  
  .on('click', function(){
  if (d3.event.defaultPrevented) {console.log('return'); return};
  	console.log('clicked');
  })
  .call(drag);
  
  
  
  
  
  //