JSFiddle - React, Tailwind, and code Playground

by Gerardo Furtado

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<svg class="chart"></svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

const svg = d3.select('svg'),
			width = +svg.attr('width'),
			height = +svg.attr('height');

		const node = svg.selectAll('.g')
			.data([{1:1},{2:2}])
			.enter().append('g');
			
			node.attr("transform", function(){ return "translate(" + Math.random() * 100 + "," + Math.random() * 100 + ")"})
			.call(d3.behavior.drag()
				.on('drag', dragmove));
			
			node.append("circle").attr('r', 15);

		node.append('text')
			.attr("dx", 16)
      .text("test")
      
		function dragmove(d) {
			d3.select(this).attr("transform", function(){ return "translate(" + d3.event.x + "," + d3.event.y + ")"})
		}

</script>