尺寸一致的圆形堆积矩阵

Question

当将循环与d3视觉效果结合使用时，我得到了混合的结果；在这种情况下，拥有一个圆形填充矩阵似乎是最直接的解决方案。但是，一个问题是，如果我以此方式创建视觉效果，则输出可能会引起误导。在下面的代码段中，您会注意到，第三个圆圈包（152）中的最大圆圈看起来与第一个圆圈包（200）中的最大圆圈一样大。因此，以目前的形式，圆包仅反映比例，而没有描绘绝对大小的变化。

var margins = top:20, bottom:300, left:30, right:100;

var height = 600;
var width = 1080;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;

var svg = d3.select('body')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight);

var graphGroup = svg.append('g')
.attr('transform', "translate("+margins.left+","+margins.top+")");

  var data = [
[
'id':'1Q19',
'id':'pooled','parentId':'1Q19','size':29.5,
'id':'spv','parentId':'1Q19', 'size':11,
'id':'single','parentId':'1Q19', 'size':200
  ],

  [
  'id':'2Q19',
  'id':'pooled','parentId':'2Q19','size':31,
  'id':'spv','parentId':'2Q19', 'size':15,
  'id':'single','parentId':'2Q19', 'size':171
],

[
'id':'3Q19',
'id':'pooled','parentId':'3Q19','size':28,
'id':'spv','parentId':'3Q19', 'size':12,
'id':'single','parentId':'3Q19', 'size':152
],

[
'id':'4Q19',
'id':'pooled','parentId':'4Q19','size':25,
'id':'spv','parentId':'4Q19', 'size':214,
'id':'single','parentId':'4Q19', 'size':101
],
];

var colorMap = 
  '1Q19':"#e7eef8",
  '2Q19':"#e7eef8",
  '3Q19':"#e7eef8",
  '4Q19':"#e7eef8",
  'pooled':"#f6d18b",
  'spv':"#366092",
  'single':"#95b3d7"
;

var strokeMap = 
  "pooled":"#000",
  "single":"#000",
  "spv":"#fff"
;

for (var j=0; j <(data.length); j++) 

  var vData = d3.stratify()(data[j]);

  var vLayout = d3.pack().size([250, 250]);

  var vRoot = d3.hierarchy(vData).sum(function (d)  return d.data.size; );
  var vNodes = vRoot.descendants();
  vLayout(vRoot);

  var thisClass = "circ"+String(j);

  var vSlices = graphGroup.selectAll('.'+thisClass).data(vNodes).attr('class',thisClass).enter().append('g');

  //console.log(vNodes)

  vSlices.append('circle')
  .attr('cx', function(d, i) 
      return d.x+(j*300)
  )
  .attr('cy', function (d)  return d.y; )
  .attr('r', function (d)  return d.r; )
  .style('fill', function(d)  return colorMap[d.data.id]);

  vSlices.append('text')
  .attr('x', function(d,i) return d.x+(j*300))
  .attr('y', function(d) return d.y+5)
  .attr('text-anchor','middle')
  .style('fill', function(d) return strokeMap[d.data.id])
  .text(function(d) return d.data.data.size ? d.data.data.size : null);

<script src="https://d3js.org/d3.v5.min.js"></script>

问题

如何为圆组矩阵中的每个圆组建立基线/统一比例？我希望背景/整体父圆具有相同的大小，但子圆在包装过程中要考虑绝对值。

注意：我对圈子中有更多的空白感到满意；在某些情况下，直径可能无法完全覆盖父圆。只要圆是相切的，整体美学主题就应该延续下去。