javascript - D3 分组点阵，每组 2 行

Question

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

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

我制作了一个 JS fiddle，您可以在其中看到每组中所有点堆叠在一起。

JS小提琴

大部分代码都可以在那里看到，但我希望这里需要发生一些事情，我需要在 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 个。这是我正在努力实现的结果的图片。

提前致谢！

标签： javascriptd3.js