Public
Edited
Dec 17, 2022
1 star
toolTip = d3.select("body").append("div").attr("class", "toolTip")
closeTip = d3.select("body").append("div").attr("class", "closeTip")
html`
<style>
.toolTip, .closeTip {
position: absolute;
display: none;
min-width: 30px;
max-width: 240px;
border-radius: 4px;
height: auto;
background: rgba(250,250,250, 0.9);
border: 1px solid #DDD;
padding: 4px 8px;
font-size: .85rem;
text-align: left;
z-index: 1000;
}
</style>
`
md`Draw your data to the svg and add the on mousemove/mousemove and mouseout function to the element. I usually separate them into separate functions so the code is a little easier to navigate when the actions on hover are more complex.`
layout = {
let height = 250
let clickFlag = false
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
let node = svg.selectAll("circle")
.data(dataPoint)
.join("circle")
.attr("cx", (d,i) => 150*(i+1) )
.attr("cy", height/2)
.attr("r", 50)
.attr("fill", "#CCC")
.on('mousemove', function(event, d) {
nodeMouseOver(event, d, isTooltip)
})
.on('mouseout', nodeMouseOut)
.on('click', nodeSelect)
return svg.node();
}
function nodeMouseOut(event, d){
// Hide tooltip on mouse out
toolTip.style("display", "none"); // Hide toolTip
// Optional cursor change removed
d3.select(event.target).style("cursor", "default");
// Optional highlight removed
d3.select(event.target)
.transition()
.attr('stroke', '#fff')
.attr('stroke-width', 0);
}
function nodeMouseOver(event, d, isTooltip){
if (isTooltip) {
toolTip.style("left", event.pageX + 18 + "px")
.style("top", event.pageY + 18 + "px")
.style("display", "block")
.html(
`
Tooltip for <strong>${d.name}</strong>
${d.other_var === undefined ? '' : "<div>Other Thing: " + d.other_var + "</div>"}
`
);
}
}
function nodeSelect(event, d, isToolTip) {
closeTip.style("left", event.pageX + 18 + "px")
.style("top", event.pageY + 18 + "px")
.style("display", "block")
.html(
`
closable tooltip for <strong>${d.name}</strong>
<button>CLOSE</button>}
`
);
// cant see tooltip when closetip is open
// so we set it to false
let isTooltip = false
return(isTooltip)
}
d3 = require("d3@6")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
