JSFiddle - React, Tailwind, and code Playground

by prayerslayer

HTML

<svg width="400" height="400">
</svg>

CSS

g.node > circle {
    fill: red;
    fill-opacity: .5;
}

g.node > text {
    fill: black;
}

JavaScript

var data = d3.select( "svg" )
    .selectAll( "g.node" )
    .data( [1, 2, 3, 4, 5] );

var groups = data.enter().append( "g" )
    .attr( "class", "node" )
    .attr( "transform", function() { return "translate(" + Math.random()*400 + "," + Math.random()*400 + ")"; } );

groups.append( "circle" )
.attr( "r", function( d ) {return d*10;});

groups.append( "text" ).text( "hallo" );

groups.on( "click", function( d, i ) {
    alert( this.tagName );
});