I'm currently attempting to implement the d3.mouse() function within an Angular project, however I am encountering an error.
Additionally, I tried using d3.pointer, but it appears that this function does not even exist.
To install d3 in my project, I used npm :
npm install d3 && npm install @types/d3 --save-dev
Thank you in advance for your help.
Here is the TypeScript code snippet:
// Rendering the X-axis on the DOM
this.svg.append("g")
.attr("transform", "translate(0," + this.height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end")
.on('mousemove', function(d){
// Retrieve necessary coordinates
var mouse = d3.mouse(this);
var x0 = x.invert(mouse[0]);
var y0 = y.invert(mouse[1]);
// Move the dotted cursor along the SVG based on mouse movement
d3.select("[name=cursor]")
.attr("d", function() {
var d = "M" + mouse[0] + "," + svgHeight;
d += " " + mouse[0] + "," + 0;
return d;
});
});