Javascript D3包装不正确

我试着用D3创建一个气泡图。所有操作都与示例中的操作完全相同，但我注意到数据呈现不正确

所以我做了一个实验：我把四个不同的孩子组合的“组”组成一个总值为

100

的组：

1x100

，

2x50

，

3x33.33

和

4x25

。例如，我有如下数据：

[{
  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;
}

然后我将图表呈现如下：

[{
  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的两个圆圈大小相同？
基于这个问题，我不一定清楚最终目标，但我认为我们可以通过每个可能性来实现完整性

我认为您希望代际圆具有相同的面积比例因子或直径比例因子（面积或直径与各代中每个节点的特定值成比例）

或者，您可能只希望在一代中具有与每个节点的特定值成比例的面积或直径，尽管我认为这不太可能

除了这些组织策略外，我们还可以使面积或直径与叶节点的某些值成比例

鉴于评论中的讨论和最近关于这个主题的另一个讨论，我将借此机会回顾上述每一个组织战略。理想情况下，这涵盖了这个问题和相关问题

以下是基于上述内容的六种策略：

面积比例

打包圆，使叶（无子女）圆具有比例面积
打包圆，使一代圆具有成比例的面积
打包圆，以便所有或多代人都有面积成比例的圆
直径/半径的比例

打包圆，使叶（无子女）圆的直径成比例
打包圆，使一代圆的直径成比例
打包圆，以便所有或多代都有直径成比例的圆
结果

基本上：一、二、四和五可以通过
d3.pack（）
实现。三个是不可能的。六不是一个圆形包装

1.叶片的比例面积
这是d3.pack（）的预期行为，不需要太多讨论。只有树叶才会有成比例的面积，任何父母都会由圆圈组成，圆圈是他们孩子的最小包围圈。它们的半径只取决于包围孩子所需的东西

2.一代人的比例面积
这也可以通过现成的
d3.pack（）
实现，但需要进行一些调整
d3.pack（）
将为叶节点提供与某些大小值成比例的面积。如果不重新编写模块（这已经是所有d3模块中最不友好的模块）就无法更改

该算法无法为某些任意生成提供成比例的区域，因此我们无法实现此策略，除非我们使用多个圆包：

示例

如果我们想缩放最高级别的父级（根的第一代子代，在本节的其余部分称为父级），那么我们可以创建父循环包。父循环包将只提供包含根和父循环的层次结构。由于所有父对象都是此截断层次结构中的叶子，因此它们都将基于某些指定值在区域中按比例缩放。然后，我们使用
g
为每个节点绘制这个圆包

在我们使圆包中的每个父节点为其子节点生成其自己的圆包后（这也是一个截断的层次结构，删除原始根，而根将成为每个圆包的父节点）。子圆包中每个叶节点的面积大小将与某些指定值成比例。每个子循环包之间叶节点的缩放将有所不同，因为这些现在单独打包的层次结构的性质和结构将决定叶的缩放

这种方法要求我们跟踪父节点的半径，以设置子圆包的大小，并在子包中正确定位圆（我在下面的代码段中为后者使用了一个局部变量）。这与实现的难度差不多，代码基本上与在同一页面上附加两个圆形包时相同

下面是一个粗略的演示：


var svg=d3.select（“svg”），diameter=+svg.attr（“width”），g=svg.append（“g”）.attr（“transform”，“translate（2,2）”），colors=[“ffffcc”，“a1dab4”，“41b6c4”，“225ea8”]；
var pack=d3.pack（）.size（[diameter-4，diameter-4]）；
var local=d3.local（）；
var root={“name”：“root”，“children”：[{“name”：“Node A”，“size”：100}，{“name”：“Node B”，“size”：100}，{“name”：“Node C”，“size”：100}
变量children=[{“name”：“NodeA”，“children”：[{“name”：“Node1”，“size”：34}，{“name”：“Node2”，“size”：33}，{“name”：“Node3”，“size”：33}，{“name”：“NodeB”，“children”：[{“name”：“Node1”，“size”：50}，{“name”：“Node2”，“size”：50}，{“name”：“NodeC”，“children