"export 'mouse' (imported as 'd3') was not found in 'd3'

Question

I'm trying to use a d3.mouse() function in angular, but its raising that error.

I tried to use d3.pointer aswell, but it says that function doesnt even exists.

I've installed d3 in my project using npm :

npm install d3 && npm install @types/d3 --save-dev

Thx in advance.

Typescript code:

 // Draw 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){

        // recover coordinate we need
        var mouse = d3.mouse(this);

        var x0 = x.invert(mouse[0]); // invert transforma a cordenada no valor correspondente à ela no eixo X
        var y0 = y.invert(mouse[1]);

        // move o cursor pontilhado ao longo do svg conforme movimento do mouse
        d3.select("[name=cursor]")
        .attr("d", function() {
            var d = "M" + mouse[0] + "," + svgHeight;
            d += " " + mouse[0] + "," + 0;
            return d;
        });
    });

Answer 1

You've installed d3 version 6. From the release notes:

Remove d3.mouse, d3.touch, d3.touches, d3.clientPoint; add d3.pointer and d3.pointers.

Either downgrade to d3 version 5, or use d3.pointer instead.