Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | import { select } from "d3";
import { useLayoutEffect } from "react";
const useLineChartMouseInteractionCombinedMode = (
showCombined,
width,
height,
handleHover,
handleCombinedMouseOut,
svgRef
) => {
useLayoutEffect(() => {
if (!showCombined || !svgRef.current) return;
const svg = select(svgRef.current);
const hoverLinesGroup = svg.append("g").attr("class", "hover-lines").style("display", "none");
// Add the hover line to group and use it in callback
hoverLinesGroup
.append("line")
.attr("class", "hover-line")
.attr("stroke", "lightgray")
.attr("stroke-width", 1)
.style("pointer-events", "none")
.style("display", "none");
const overlay = svg
.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all");
overlay.on("mousemove", handleHover);
overlay.on("mouseout", handleCombinedMouseOut);
return () => {
overlay.on("mousemove", null);
overlay.on("mouseout", null);
hoverLinesGroup.remove();
overlay.remove();
};
}, [showCombined, width, height, handleHover, handleCombinedMouseOut, svgRef]);
};
export default useLineChartMouseInteractionCombinedMode;
|