Uncaught TypeError: d3.mouse is not a function

Community Help
1

I want to get my cursor does the same as in Line chart with cursor for exact values

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatable" content="ie=edge">
    <title>Document</title>
  </head>
  <div id="container"></div>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
    <script type="module">
      // Curved line declaration
      const data = [{xpoint: 10, ypoint: 0.2},
		    {xpoint: 4, ypoint: 1},
		    {xpoint: 3, ypoint: 2},
		    {xpoint: 2, ypoint: 3},
		    {xpoint: 1, ypoint: 10}];
// Declare the chart dimensions and margins.
const width = 640;
const height = 400;
const marginTop = 20;
const marginRight = 20;
const marginBottom = 30;
const marginLeft = 40;

// Declare the x (horizontal position) scale.
      const x = d3.scaleLog()
	    .domain([0.2, 60])
    .range([marginLeft, width - marginRight]);

// Declare the y (vertical position) scale.
const y = d3.scaleLog()
    .domain([0.1, 100])
    .range([height - marginBottom, marginTop]);

  // Declare the line generator.
      const line = d3.line()
	.x((d) => x(d.xpoint))
	.y((d) => y(d.ypoint));

// Create the SVG container.
const svg = d3.create("svg")
     .attr("width", width)
    .attr("height", height);

// Add the x-axis.
svg.append("g")
    .attr("transform", `translate(0,${height - marginBottom})`)
    .call(d3.axisBottom(x));

// Add the y-axis.
svg.append("g")
    .attr("transform", `translate(${marginLeft},0)`)
    .call(d3.axisLeft(y));

  // Append a path for the line.
  svg.append("path")
    .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
    .attr("d", line(data));

 // This allows to find the closest X index of the mouse:
  var bisect = d3.bisector(function(d) { return d.x; }).left;

  // Create the circle that travels along the curve of chart
  var focus = svg
    .append('g')
    .append('circle')
      .style("fill", "none")
      .attr("stroke", "black")
      .attr('r', 8.5)
      .style("opacity", 0)

 // Create the text that travels along the curve of chart
  var focusText = svg
    .append('g')
    .append('text')
      .style("opacity", 0)
      .attr("text-anchor", "left")
      .attr("alignment-baseline", "middle")

 // Create a rect on top of the svg area: this rectangle recovers mouse position
  svg.append('rect')
    .style("fill", "none")
    .style("pointer-events", "all")
    .attr('width', width)
    .attr('height', height)
    .on('mouseover', mouseover)
    .on('mousemove', mousemove)
    .on('mouseout', mouseout);
      
// What happens when the mouse move -> show the annotations at the right positions.
  function mouseover() {
      focus.style("opacity", 1)
      focusText.style("opacity",1)
  };

function mousemove() {
    // recover coordinate we need
    var x0 = x.invert(d3.mouse(this)[0]);
    var i = bisect(data, x0, 1);
    selectedData = data[i]
    focus
      .attr("cx", x(selectedData.x))
      .attr("cy", y(selectedData.y))
    focusText
      .html("x:" + selectedData.x + "  -  " + "y:" + selectedData.y)
      .attr("x", x(selectedData.x)+15)
	.attr("y", y(selectedData.y))
};
      function mouseout() {
    focus.style("opacity", 0)
	  focusText.style("opacity", 0)
      };

    
// Append the SVG element.
 container.append(svg.node());

</script>
</body>
</html>

but have instead

Uncaught TypeError: d3.mouse is not a function
2

Please don’t ask low-effort questions that you could have answered yourself with a simple Google search.

When following examples be sure to verify that they are for the correct version. The code that you shared above was written for D3 v4.

In general, please make sure to also describe your own attempts at solving your problem, and be as specific as you can.