Skip to content

Instantly share code, notes, and snippets.

@scottzach1
Forked from martinnormark/d3-mouse-over-line.js
Last active September 11, 2021 23:20
Show Gist options
  • Save scottzach1/7dc42f7d54eedb89c562afb8ebfbe123 to your computer and use it in GitHub Desktop.
Save scottzach1/7dc42f7d54eedb89c562afb8ebfbe123 to your computer and use it in GitHub Desktop.
Adding a vertical line to a D3v7 chart, that follows the mouse pointer.
const vertical = d3.select(".chart")
.append("div")
.attr("class", "remove")
.style("position", "absolute")
.style("z-index", "19")
.style("width", "1px")
.style("height", "100%")
.style("top", "0px")
.style("left", "0px")
.style("background", "#000000");
d3.select(".chart")
// @ts-ignore
.on("mousemove", function (event: MouseEvent, _d, _i) {
vertical.style("left", `${event.pageX}px` )
})
// @ts-ignore
.on("mouseover", function (event: MouseEvent, _d, _i) {
vertical.style("left", `${event.pageX}px`)
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment