JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/mbostock/d3/master/d3.v2.min.js"></script>

CSS

svg * { stroke:black }
rect { fill:red }
circle { fill:blue }

JavaScript

var dragGroup = d3.behavior.drag()
    .on('dragstart', function() {
        console.log('Start Dragging Group');
    })
    .on('drag', function(d, i) {
        d.x += d3.event.dx;
        d.y += d3.event.dy;
        d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
    });

var dragCircle = d3.behavior.drag()
    .on('dragstart', function() {
        d3.event.sourceEvent.stopPropagation();
        console.log('Start Dragging Circle');
    })
    .on('drag', function(d, i) {
        d.cx += d3.event.dx;
        d.cy += d3.event.dy;
        d3.select(this).attr('cx', d.cx).attr('cy', d.cy)
    });

var svg = d3.select('body').append('svg').attr('viewBox', '-50 -50 300 300');
var g = svg.selectAll('g').data([{x:10,y:10}])
    .enter().append('g').call(dragGroup);

g.append('rect').attr('width', 100).attr('height', 100);

g.selectAll('circle').data([{cx: 90,cy:80}]).enter()
    .append('circle')
        .attr('cx', function(d){ return d.cx })
        .attr('cy', function(d){ return d.cy })
        .attr('r', 30)
        .call(dragCircle);