如何使用D3.js pack()方法实现中心带空隙的圆形打包布局？

要实现中心留空白、其余圆形环绕的效果，无需依赖forceSimulation，直接基于pack()就能完成，核心思路是通过占位节点引导布局：

实现步骤 #

• 构造包含占位节点的层级数据：
  给根节点添加一个不可见的中心子节点，它的size值决定中心空隙的大小

  const data = {
    name: "root",
    children: [
      { name: "placeholder", size: 1200 }, // 中心占位节点，size越大空白区越大
      { name: "nodeA", size: 250 },
      { name: "nodeB", size: 350 },
      { name: "nodeC", size: 180 },
      // 更多业务节点...
    ]
  };
  

• 生成层级结构并应用pack布局：

  const root = d3.hierarchy(data)
    .sum(d => d.size)
    .sort((a, b) => b.size - a.size);
  
  const packLayout = d3.pack()
    .size([600, 600]) // 布局整体宽高
    .padding(4); // 节点间的间距
  
  packLayout(root);
  

• 绘制节点时跳过占位节点：

  const svg = d3.select("body").append("svg")
    .attr("width", 600)
    .attr("height", 600);
  
  svg.selectAll("circle")
    .data(root.descendants().filter(d => d.data.name !== "placeholder"))
    .enter()
    .append("circle")
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .attr("r", d => d.r)
    .style("fill", "#4a90e2")
    .style("stroke", "#fff")
    .style("stroke-width", 2);
  

调整技巧 #

• 占位节点的size与业务节点的size比例，直接影响环绕的疏密程度，可根据视觉需求微调。
• 若想让节点更紧凑，可减小padding参数值。

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