layout = {
let height = 250
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
let node = svg.selectAll("circle")
.data(dataPoint)
.join("circle")
.attr("cx", width/2)
.attr("cy", height/2)
.attr("r", 50)
.attr("fill", "#CCC")
.on('mousemove', nodeMouseOver)
.on('mouseout', nodeMouseOut );
function nodeMouseOver(event, d){
toolTip.style("left", event.pageX + 18 + "px")
.style("top", event.pageY + 18 + "px")
.style("display", "block")
.html(`Tooltip for <strong>${d.name}</strong>`);
d3.select(event.target).style("cursor", "pointer");
d3.select(event.target)
.transition()
.attr('stroke', '#A8234E')
.attr('stroke-width', 3);
}
function nodeMouseOut(event, d){
toolTip.style("display", "none");
d3.select(event.target).style("cursor", "default");
d3.select(event.target)
.transition()
.attr('stroke', '#fff')
.attr('stroke-width', 0);
}
return svg.node();
}