如何修改D3.js饼图原点坐标，使其随力导向图节点拖拽更新位置？

要让嵌套在力导向图节点中的饼图随节点拖拽/位置更新同步移动，最优方案是利用SVG的transform属性平移饼图的父容器，而非修改饼图弧形的d属性——这种方式更高效，且能完整保留饼图的半径、数据分布等所有属性。

方法1：饼图作为节点容器的子元素（推荐） #

从你的代码看，饼图的<g class="arc">是节点容器（node）的子元素，只需在tick函数中更新节点容器的位置，饼图会自动跟随移动：

function ticked() {
  // 更新节点容器的transform，将其定位到力导向图计算出的坐标
  node.attr("transform", d => `translate(${d.x}, ${d.y})`);
  
  // 同步更新力导向图的连线（如果有）
  link.attr("x1", d => d.source.x)
      .attr("y1", d => d.source.y)
      .attr("x2", d => d.target.x)
      .attr("y2", d => d.target.y);
}

原理：SVG元素的位置由其父容器的transform属性决定，子元素会继承父容器的坐标偏移，无需单独修改饼图的弧形路径。

方法2：饼图独立于节点容器（备用） #

如果饼图是直接添加到SVG根元素而非节点容器内，需要在tick函数中单独更新每个饼图组的transform：

function ticked() {
  // 假设nodes是力导向图的数据集，每个节点包含x、y坐标
  d3.selectAll('.arc')
    .data(nodes)
    .attr("transform", d => `translate(${d.x}, ${d.y})`);
}

不推荐修改弧形d属性的原因 #

若强行修改弧形的d属性，需要重新计算每个路径点的坐标（给所有点加上节点的x/y偏移），这不仅代码繁琐，还会增加不必要的计算开销——浏览器对transform的平移优化远优于重绘路径数据。

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