JSFiddle - React, Tailwind, and code Playground

by longsonr

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<svg id="layer" width="500" height="500" style="background-color: #28a4c9">

</svg>

JavaScript

function drawCircle(rect, side){

        var g = d3.select(rect[0][0].parentNode);

        var x = 0, y = 0, r =0;

        var rectHeight = parseFloat(rect.attr('height'));
        var rectWidth = parseFloat(rect.attr('width'));
        var rectX = parseFloat(rect.attr('x'));
        var rectY = parseFloat(rect.attr('y'));

        y = rectY + rectHeight/2;
        r  = rectHeight/8;

        if(side == 'left'){
            x = rectX;
        }else{
            x = rectX + rectWidth;
        }

        g.append('circle')
                .attr('cx', x)
                .attr('cy', y)
                .attr('r', r)
                .style('visibility', 'hidden')
                .on('mouseover', function(){
                   g
                            .selectAll('circle')
                            .style('visibility', 'visible')
                    ;
                })
                .on('mouseout', function () {
                    g
                            .selectAll('circle')
                            .style('visibility', 'hidden')
                });

        rect
                .on('mouseover', function(){

//                    alert('hover');

                    g
                            .selectAll('circle')
                            .style('visibility', 'visible')
                    ;
                })
                .on('mouseout', function(){
                   g
                            .selectAll('circle')
                            .style('visibility', 'hidden')

                })




    }




 var rectangle = {
        width : 50,
        height:50,
        x:100,
        y:100

    }; 

   var svg = d3.select('svg');

    var g = svg.append('g').attr('id', 'group');

    console.log(g.attr('id'));

    var rect = g.append('rect')
                    .attr('id', 'aaa')
            .attr('x', rectangle.x)
            .attr('y', rectangle.y)
            .attr('width', rectangle.width)
            .attr('height',...