无法将工具提示添加到d3 v4中的可缩放散点图

// 创建SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

// 创建散点图
var scatter = svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d) { return xScale(d.x); })
  .attr("cy", function(d) { return yScale(d.y); })
  .attr("r", function(d) { return rScale(d.r); })
  .attr("fill", function(d) { return colorScale(d.color); })
  .on("mouseover", function(d) {
    // 鼠标悬停时显示工具提示
    tooltip.style("display", "block")
      .html("x: " + d.x + "<br/>" +
            "y: " + d.y + "<br/>" +
            "r: " + d.r + "<br/>" +
            "color: " + d.color)
      .style("left", (d3.event.pageX + 10) + "px")
      .style("top", (d3.event.pageY - 10) + "px");
  })
  .on("mouseout", function(d) {
    // 鼠标移出时隐藏工具提示
    tooltip.style("display", "none");
  });

// 创建工具提示容器
var tooltip = d3.select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("display", "none");

// CSS样式
.tooltip {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 12px;
}