D3包装圈错误

Question

我试图用D3创建一个气泡图。一切都与示例完全一样，但后来我发现数据渲染不正确。

所以我做了一个实验：我已经把四个＆＃34;小组＆＃34;使用不同的子组合创建总值为100的群组：1 x 100，2 x 50，3 x 33.33和4 x 25。例如。我有这样的数据：

[{
  title: "X",
  children: [
    {
      title: "100",
      weight: 100
    },
  ]
},
{
  title: "X",
  children: [
    {
      title: "50",
      weight: 50
    },
    {
      title: "50",
      weight: 50
    },
  ]
},
{
  title: "X",
  children: [
    {
      title: "33",
      weight: 33.33
    },
    {
      title: "33",
      weight: 33.33
    },
    {
      title: "33",
      weight: 33.33
    },
  ]
},
{
  title: "X",
  children: [
    {
      title: "25",
      weight: 25
    },
    {
      title: "25",
      weight: 25
    },
    {
      title: "25",
      weight: 25
    },
    {
      title: "25",
      weight: 25
    },
  ]
}]

然后我像这样呈现图表：

const rootNode = d3.hierarchy(data);

rootNode.sum(d => d.weight || 0);

const bubbleLayout = d3.pack()
    .size([chartHeight, chartHeight])
    .radius(d => d.data.weight); // toggling this line on and off makes no difference

let nodes = null;

try {
    nodes = bubbleLayout(rootNode).descendants();
} catch (e) {
    console.error(e);
    throw e;
}

但是由此产生的气泡甚至没有任何意义：

要定义此渲染器的不正确性，请考虑屏幕截图中间的气泡：没有子项的蓝色气球的半径为100，其实际大小为180 px。它右侧的两个气泡都具有半径50，因此它们应该180 px宽（当放在同一轴上时）。但是，他们的总直径是256 px，这让我认为这是不正确的渲染：

问题：为什么会发生这种情况以及如何正确显示此图表，以便r = 100的圈子与两个圈子r = 50的圈子大小相同？