JSFiddle - React, Tailwind, and code Playground

by devgru

CSS

body {
    height: 100px;
}

JavaScript

var b = [ 1, 2 ,3 ]
var svg = d3.select('body')
    .append('svg')

var newData = 
    svg.selectAll('g')
        .data(b)
        .enter()
        .append('g')
        .on('mouseover',
            function (d, i) {
                d3.select(this)
                    .select('text')
                    .style('opacity', 1)
            }
        )
        .on('mouseout', function () {
           d3.select(this)
               .select('text')
               .style('opacity', 0)
        })

newData
    .append('circle')
    .attr('r', 10)
    .attr('cx', 10)
    .attr('cy', function (d) { return d * 30 })

newData
    .append('text')
    .attr('x', 25)
    .attr('y', function (d) { return d * 30 })
    .text(function (d) { return d })
    .style('opacity', 0)