如何为D3.js(v6)带子元素的动画节点设置初始中心坐标？

我将SVG节点定义为包含<circle>和<text>的<g>元素，结构如下：

<g class="nodes">
    <g>
        <circle r="63"></circle>
        <text class="true">Croatia</text>
    </g>
    <!-- 更多节点 -->
</g>

使用D3.js v6的力导向布局实现圆形打包动画，功能正常，但节点始终从SVG右上角开始动画，希望改为从SVG中心向外扩散。已尝试以下方法但无效：

• 给节点<g>元素添加x/y属性或提前设置transform: translate
• 在将数据转为节点前，初始化每个对象的x/y值：

arrayOfCountries.forEach((country) => {
    country["x"] = 300;
    country["y"] = 700;
});

var simulation = d3
  .forceSimulation()
  .nodes(arrayOfCountries);

动画通过simulation.on("tick", tickActions)实现，tick函数更新<g>的transform属性：

function tickActions() {
    node.attr("transform", function (d) {
      return "translate(" + [d.x, d.y] + ")";
    });
}

技术栈为Vue.js 3，求解决方法。

要让节点从SVG中心开始动画，核心是确保D3力模拟从正确的初始坐标启动，关键步骤如下：

1. 确认SVG中心坐标
   先获取SVG实际的宽高，计算中心位置（比如SVG宽600、高1400，则中心为x=300, y=700），避免硬编码错误。

2. 正确初始化节点x/y并重启模拟
   D3力模拟创建后会自动进入低alpha（活跃度）状态，仅设置节点x/y不会触发重新计算，必须重启模拟让它从初始位置开始：

   // 计算SVG中心（可通过Vue refs获取SVG元素的clientWidth/clientHeight）
   const svg = document.querySelector("svg");
   const centerX = svg.clientWidth / 2;
   const centerY = svg.clientHeight / 2;
   
   // 给每个节点设置初始中心坐标
   arrayOfCountries.forEach(country => {
     country.x = centerX;
     country.y = centerY;
     // 如果有radius属性（对应circle的r），需提前定义用于碰撞检测
     country.radius = 63;
   });
   
   // 创建力模拟，添加必要的力（示例为排斥力+碰撞检测）
   const simulation = d3.forceSimulation(arrayOfCountries)
     .force("charge", d3.forceManyBody().strength(80)) // 排斥力强度，按需调整
     .force("collide", d3.forceCollide().radius(d => d.radius + 5)) // 避免节点重叠
     .on("tick", tickActions);
   
   // 重置模拟活跃度并重启，确保从初始位置开始动画
   simulation.alpha(1).restart();
   

3. 保持tick函数逻辑
   原tick函数无需修改，确保通过节点数据的d.x/d.y更新transform即可：

   function tickActions() {
     node.attr("transform", d => `translate(${d.x}, ${d.y})`);
   }
   

4. Vue生命周期注意事项
   确保在Vue的onMounted钩子中执行D3代码，此时SVG元素已挂载到DOM，能正确获取宽高。

为什么之前的方法无效？ #

D3力模拟初始化时会自动生成节点的初始x/y（如果未设置），但如果设置x/y后未重启模拟，模拟会以低alpha状态继续运行，不会重新读取初始坐标。调用alpha(1).restart()会重置模拟的活跃度，让它从你设置的中心坐标开始计算力导向动画。

内容的提问来源于stack exchange，提问作者Fred Rocha