如何在D3中的折线图末尾添加工具提示

var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

var data = [
    {x: 1, y: 10},
    {x: 2, y: 20},
    {x: 3, y: 15},
    {x: 4, y: 25},
    // 更多数据...
];

var line = d3.line()
             .x(function(d) { return xScale(d.x); })
             .y(function(d) { return yScale(d.y); });

svg.append("path")
   .datum(data)
   .attr("class", "line")
   .attr("d", line);

var tooltip = d3.select("body")
                .append("div")
                .attr("class", "tooltip")
                .style("opacity", 0);

svg.selectAll(".dot")
   .data(data)
   .enter()
   .append("circle")
   .attr("class", "dot")
   .attr("cx", function(d) { return xScale(d.x); })
   .attr("cy", function(d) { return yScale(d.y); })
   .attr("r", 5)
   .on("mouseover", function(d) {
       tooltip.transition()
              .duration(200)
              .style("opacity", 0.9);
       tooltip.html("x: " + d.x + "<br/>" + "y: " + d.y)
              .style("left", (d3.event.pageX) + "px")
              .style("top", (d3.event.pageY - 28) + "px");
   })
   .on("mouseout", function(d) {
       tooltip.transition()
              .duration(500)
              .style("opacity", 0);
   });