d3可缩放的太阳爆发与工具提示调整的%，因为它的过渡？

<script src="https://d3js.org/d3.v7.min.js"></script>

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

// 创建层次布局
var data = {
  name: "太阳爆发",
  children: [
    { name: "级别1", value: 10 },
    { name: "级别2", value: 20 },
    { name: "级别3", value: 30 }
  ]
};
var root = d3.hierarchy(data);
var tree = d3.tree().size([360, 200]);
var links = tree(root).links();
var nodes = root.descendants();

// 创建连线
svg.selectAll(".link")
  .data(links)
  .enter()
  .append("path")
  .attr("class", "link")
  .attr("d", d3.linkRadial()
    .angle(function(d) { return d.x / 180 * Math.PI; })
    .radius(function(d) { return d.y; }));

// 创建节点
var node = svg.selectAll(".node")
  .data(nodes)
  .enter()
  .append("g")
  .attr("class", "node")
  .attr("transform", function(d) {
    return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
  });

node.append("circle")
  .attr("r", 5);

node.append("text")
  .attr("dy", ".31em")
  .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
  .attr("transform", function(d) {
    return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)";
  })
  .text(function(d) { return d.data.name; });

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

// 添加鼠标悬停事件
node.on("mouseover", function(d) {
  tooltip.transition()
    .duration(200)
    .style("opacity", .9);
  tooltip.html(d.data.name + ": " + d.data.value)
    .style("left", (d3.event.pageX) + "px")
    .style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
  tooltip.transition()
    .duration(500)
    .style("opacity", 0);
});