function hover(svg, path) {
svg
.on("mousemove", moved)
.on("mouseenter", entered)
.on("mouseleave", left);
const dot = svg.append("g")
.attr("display", "none");
dot.append("text")
.attr("font-size", 12)
.attr("text-anchor", "start")
.attr("y", 0);
function moved(event) {
event.preventDefault();
const pointer = d3.pointer(event, this);
const xm = x.invert(pointer[0]);
const ym = y.invert(pointer[1]);
const i = d3.bisectCenter(data.dates, xm);
const s = d3.least(data.series, d => Math.abs(d.values[i] - ym));
path.attr("stroke", d => d === s ? null : null)
path.attr("stroke-opacity", d => d === s ? 1 : 0.05)
path.attr("stroke-width", d => d === s ? 0.5 : 0.1)
.filter(d => d === s)
.raise();
dot.attr("transform", `translate(${width - margin.right +5},${y(s.values[709])})`);
dot.select("text")
.html(`\ ${s.region + " |"} \ ${s.values[i]} \ `);
}
function entered() {
path.style("mix-blend-mode", null);
dot.attr("display", null);
}
function left() {
path.style("mix-blend-mode", "multiply")
.attr("stroke", null)
.attr("stroke-opacity", null)
.attr("stroke-width", null);
dot.attr("display", "none");
}
}