如何实现D3 Pack静态尺寸布局：仅让D3处理圆位置不修改尺寸？

D3 Pack默认会根据节点数据的总和自动计算每个圆的半径，目的是让所有子节点能完美容纳在父节点内部，这就是它会覆盖你传入尺寸的原因。要实现只让D3负责位置排布、保留自定义尺寸的需求，关键是自定义Pack的半径计算规则，具体步骤如下：

1. 准备包含固定尺寸的数据源 #

首先确保你的数据结构里，每个需要固定尺寸的节点都带有明确的尺寸属性（比如fixedSize），嵌套结构也适用：

const dataset = {
  name: "Root",
  children: [
    { name: "RAD", fixedSize: 5000 }, // 你想要保留的自定义尺寸
    { name: "ComponentA", fixedSize: 2000 },
    { name: "ComponentB", fixedSize: 3000 },
    { 
      name: "NestedGroup", 
      children: [
        { name: "SubItem1", fixedSize: 1500 },
        { name: "SubItem2", fixedSize: 1000 }
      ]
    }
  ]
};

2. 初始化Pack布局时重写半径逻辑 #

创建Pack布局实例时，通过.radius()方法传入一个函数，直接返回数据中定义的固定尺寸，而不是让D3自动计算：

// 定义画布尺寸
const width = 800;
const height = 800;

// 创建Pack布局，核心是自定义radius函数
const packLayout = d3.pack()
  .size([width, height]) // 布局的整体画布范围
  .radius(d => d.fixedSize); // 强制使用数据中的固定尺寸作为半径

// 处理数据层级：sum用fixedSize，帮助布局计算容纳空间
const rootNode = d3.hierarchy(dataset)
  .sum(d => d.fixedSize || 0); // 没有fixedSize的节点可以设为0或自定义值

// 生成布局节点数据
const nodes = packLayout(rootNode).descendants();

3. 绘制圆并使用自定义尺寸 #

绘制时直接使用节点的x（横坐标）、y（纵坐标）和r（半径）属性即可，此时r就是你在数据中指定的固定值：

// 创建SVG画布
const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

// 绘制所有圆
svg.selectAll("circle")
  .data(nodes)
  .enter()
  .append("circle")
  .attr("cx", d => d.x)
  .attr("cy", d => d.y)
  .attr("r", d => d.r)
  .style("fill", "#ddd")
  .style("stroke", "#333");

// 可选：添加标签
svg.selectAll("text")
  .data(nodes.filter(d => !d.children)) // 只给叶子节点加标签
  .enter()
  .append("text")
  .attr("x", d => d.x)
  .attr("y", d => d.y)
  .attr("text-anchor", "middle")
  .text(d => d.name);

注意事项 #

• 根节点空间适配：因为D3还是会尝试把所有子节点放在根节点范围内，所以需要确保你设置的.size([width, height])足够大，能容纳所有固定尺寸的圆，避免重叠或裁剪。如果不确定，可以手动计算所有子节点的直径总和，再适当放大作为画布尺寸。
• 嵌套节点处理：如果有多层嵌套，父节点的fixedSize需要足够大以容纳所有子节点的尺寸，否则子节点可能会超出父节点范围。
• 混合场景适配：如果部分节点需要固定尺寸、部分需要自动计算，可以在.radius()函数里做判断，比如：

  .radius(d => d.fixedSize ? d.fixedSize : d.r) // 有fixedSize用自定义，否则用D3自动计算的r
  

这样调整后，D3就只会负责计算每个圆的位置，而不会修改你指定的精确尺寸啦～

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