tooltip = {
chart
const tooltip =
d3.select('body').append('div')
.attr('class', 'tooltip')
.style('position', 'absolute')
.style('visibility', 'hidden').text('ege')
d3.select("#grap").selectAll("circle")
.on("mouseover", function(d){
d3.select(this).transition().attr('stroke-width', "3px").attr("stroke","red")
const class_name="."+d.Institution_name.replaceAll(/\W/g,"").toLowerCase()
d3.selectAll(class_name).transition().attr('stroke-width', "3px").attr("stroke","red")
})
.on("mousemove", function(d){
return tooltip
.html(`\
<b>Institution:</b> ${d.Institution_name}<br />\
<b> Order Date:</b> ${d3.timeFormat('%Y-%m-%d')(d.Date_order)}<br />\
<b>Price per Mask:</b> ${d.cal_unit_price}<br />\
<b>Total Number of masks:</b> ${d.amount}<br />\
<b>Order Amount in Rand:</b> ${d.order_num}<br />\
`)
.style("top", (d3.event.pageY-10)+"px")
.style("left",(d3.event.pageX+20)+"px")
.style("visibility", "visible");
})
.on("mouseout", function(d){
d3.select(this).transition().attr('stroke-width', "0px")
const class_name="."+d.Institution_name.replaceAll(/\W/g,"").toLowerCase()
d3.selectAll(class_name).transition().attr('stroke-width', "0px")
return tooltip.html(``).style("visibility", "hidden");
})
}