当鼠标悬停在XY图表上时，我试图显示数据点的x和y坐标。链接到我的小提琴可以找到here。我遵循了here的例子，但我不知道为什么当我将鼠标悬停在XY图表上的点上时，工具提示没有显示。代码如下，任何帮助都非常感谢！

var data = [ {x: 0, y: 0}, {x: 5, y: 30}, {x: 10, y: 40},
              {x: 15, y: 60}, {x: 20, y: 70}, {x: 25, y: 100} ];

  const margin = {
    left: 20,
    right: 20,
    top: 20,
    bottom: 80
  };

  const svg = d3.select('svg');
  svg.selectAll("*").remove();

  const width = 200 - margin.left - margin.right;
  const height = 200 - margin.top - margin.bottom;

  const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);

  var x = d3.scaleLinear()
          .domain([0, d3.max(data, function(d){ return d.x; })])
          .range([0,width])
          .nice();

  var y = d3.scaleLinear()
          .domain([0, d3.max(data, function(d){ return d.y; })])
          .range([0,height])
          .nice();

  const xAxis = d3.axisTop()
              .scale(x)
              .ticks(5)
              .tickPadding(5)
              .tickSize(-height)

  const yAxis = d3.axisLeft()
              .scale(y)
              .ticks(5)
              .tickPadding(5)
              .tickSize(-width);

  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", `translate(20,${height-margin.top-60})`)
    .call(xAxis);

  svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(20,20)")
    .call(yAxis);

  var lineFunction = d3.line()
  .x(function(d) {return x(d.x); })
  .y(function(d) {return y(d.y); })
  .curve(d3.curveLinear);

  var tooltip = d3.select("svg")
      .append("div")
      .style("opacity", 0)
      .attr("class", "tooltip")
      .style("background-color", "white")
      .style("border", "solid")
      .style("border-width", "1px")
      .style("border-radius", "5px")
      .style("padding", "10px")

  // A function that change this tooltip when the user hover a point.
  // Its opacity is set to 1: we can now see it. Plus it set the text and position of tooltip depending on the datapoint (d)
  var mouseover = function(d) {
    tooltip
      .style("opacity", 1)
  }

  var mousemove = function(d) {
    tooltip
      .html("x: " + d.x + "<br/>" + "y: " + d.y)
      .style("left", (d3.mouse(this)[0]+90) + "px")
      .style("top", (d3.mouse(this)[1]) + "px")
  }

  // A function that change this tooltip when the leaves a point: just need to set opacity to 0 again
  var mouseleave = function(d) {
    tooltip
      .transition()
      .duration(200)
      .style("opacity", 0)
  }

  //defining and plotting the lines
  var path = g.append("path")
              .attr("class", "path1")
              .attr("id", "blueLine")
              .attr("d", lineFunction(data))
              .attr("stroke", "blue")
              .attr("stroke-width", 2)
              .attr("fill", "none")
              .attr("clip-path", "url(#clip)");

        // plot a circle at each data point
        g.selectAll(".dot")
            .data(data)
            .enter().append("circle")
            .attr("cx", function(d) { return x(d.x); } )
            .attr("cy", function(d) { return y(d.y); } )
            .attr("r", 3)
            .attr("class", "blackDot")
            .attr("clip-path", "url(#clip)")
            .on("mouseover", mouseover )
            .on("mousemove", mousemove )
            .on("mouseleave", mouseleave )

字符串