JSFiddle - React, Tailwind, and code Playground

by Gilsha Krishnan

HTML

<svg height="600" width="600" style="background: black">

    <g>
        <rect x="0" y="0" , width="600" height="40" style="fill:gold;"></rect>
        <circle id="drag" cx="15" cy="20" init-cx="15" init-cy="20" r="10"
                style="stroke: white; stroke-width: 2px; fill:blue"/>

    </g>

    <g id="playground">
        <g>
            <circle class='top' cx="180" cy="120" r="30" style="stroke: white; stroke-width: 2px; fill:white"/>
        </g>
        <g>
            <circle class='top' cx="200" cy="220" r="30" style="stroke: white; stroke-width: 2px; fill:white"/>
        </g>
        <g>
            <circle class='top' cx="320" cy="150" r="50" style="stroke: white; stroke-width: 2px; fill:white"/>
        </g>
    </g>
</svg>

JavaScript

var zoom = d3.behavior.zoom()
    .scaleExtent([-1, 8])
    .on("zoom", function() {
        var graph = d3.select('svg');
        graph
            .select('#playground')
            .attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    });

var move = d3.behavior.drag()
    .on("dragstart", function() {
        d3.event.sourceEvent.stopPropagation();
    })
    .on('drag', function() {
        var curr = d3.select(this)
            .attr({
                cx: d3.mouse(this)[0],
                cy: d3.mouse(this)[1]
            });
    })
    .on('dragend', function() {
        var curr = d3.select(this);
        curr.attr({
                cx: curr.attr('cx'),
                cy: curr.attr('cy'),
                r: curr.attr('r')
            })
            .style({
                fill: 'white',
                stroke: 'red',
                'stroke-width': '2px'
            });
    });


d3.select('#drag').call(move);
d3.selectAll('.top').call(move);
d3.select('svg').call(zoom);