使用D3 Layout Pack实现气泡图时X、Y值为NaN的问题排查

嘿，我来帮你搞定这个NaN的问题～其实核心原因很简单：你还没让D3的Pack布局帮你计算气泡的位置(x、y)和半径(r)值，直接用原始数据绑定元素肯定会拿到NaN呀！

问题本质 #

D3的Pack布局(d3.layout.pack())不是自动给你的原始数据加属性的，它的作用是接收层级结构的数据，经过计算后返回包含x、y、r的节点数组。你看到的示例里数据有这些属性，是因为示例已经完成了布局计算的步骤，而你漏掉了这关键一步。

具体修复步骤 #

1. 初始化并配置Pack布局
   先设置好布局的画布尺寸、气泡间距等参数：

   // 假设你的画布宽高是width和height
   var pack = d3.layout.pack()
     .size([width, height]) // 布局的可用尺寸
     .padding(3); // 气泡之间的间距
   

2. 准备符合要求的层级数据
   Pack布局要求数据是层级结构（根节点包含子节点），所以需要把你的原始数据包裹在一个根对象里：

   // 假设你的原始数据是data数组，每个元素要有value字段（用来计算半径）
   var rootData = {
     children: data
   };
   

   ⚠️ 注意：每个子节点必须有value属性，布局会根据这个值的相对大小计算气泡半径，没有的话也会出现NaN！

3. 让布局计算节点数据
   调用布局函数处理根数据，得到包含x、y、r的节点数组：

   var calculatedNodes = pack.nodes(rootData);
   

   这时候calculatedNodes里的每个节点（除了根节点）都会有x、y、r这三个属性了。

4. 绑定计算后的数据到DOM元素
   现在用计算好的节点数据来创建气泡，记得过滤掉根节点（因为根节点是用来包裹子节点的，不需要渲染）：

   var bubbles = svg.selectAll("circle")
     .data(calculatedNodes.filter(function(d) { 
       return !d.children; // 只取叶子节点（你的实际数据项）
     }))
     .enter()
     .append("circle")
     .attr("cx", function(d) { return d.x; })
     .attr("cy", function(d) { return d.y; })
     .attr("r", function(d) { return d.r; });
   

为什么示例里的数据有x、y、r？ #

那些示例要么是提前运行了布局计算，把结果存在了数据里；要么是在代码里已经完成了上述步骤，只是你没注意到布局处理数据的环节～

按照上面的步骤调整后，你就能看到正常的气泡图，不会再出现translate(NaN, NaN)的报错啦！

内容的提问来源于stack exchange，提问作者Sebastian Berglönn