D3分组点矩阵，每组2行

Question

我正在尝试创建某种单位图（我实际上不知道它的名称）。我想要实现的是，圆彼此相邻渲染，并且当它们达到极限（例如2）时，它们彼此叠放，依此类推。

我只是不知道如何解决这类问题，需要一些帮助以向我指明正确的方向，并可能帮助我解决这个问题。

我做了一个JS小提琴，您可以在每个组中看到所有堆叠在一起的点。

JS fiddle

大多数代码都可以在这里看到，但是我希望这里需要发生一些事情，我需要使用CX添加一些东西

var dots = groups
  .selectAll('circle')
  .data(d => d3.range(0, d.apples))
  .enter()
  .append('circle')
  .attr('class', 'dot')
  .attr('r', 10)
  .attr('cy', d => y(d))
  .style('fill', 'blue')

在大多数情况下，它都可以解决，但这是我想要实现的最终结果。结果需要点将它们自己每行2组。这是我要实现的结果的图片。  

谢谢！