生成视觉上令人愉悦的圆形包

Question

我的目标是生成一个模仿这个的circle pack：（在我对圆圈位置和半径感兴趣时，不要注意数字和颜色）

基于d3js.org的一个例子，我创建了这个jsfiddle，结果为：

我尝试了圆形布局布局，但结果更糟糕，空间很大......

我怎样才能得到看起来像第一张照片的东西？

编辑：This example似乎更接近我想要的，我只是注意到了。

编辑2：受到@AmeliaBR想法的启发，codepen。还没决定。预览：

然后我减少了最大半径：

最新最好：最大rad 12 min rad 3

Answer 1

请参阅关于如何开发的主要问题的评论...

Mike Bostock为Mitchell的最佳候选人采样算法创建了几个不同的可视化：

• with gray circles on a white background
• with white circles on a black background

Mitchell's algorithm的最初目的是以不产生重复模式的方式对一系列值进行采样，但也不容易像真正的随机样本那样创建簇和间隙。

Bostock的演示将采样算法与d3 quadtree数据结构相结合，该数据结构将数据点分类为树结构，该结构被划分为将每个数据点放入其自己的节点所需的分支。通过四叉树，Bostock可以快速判断每个添加到图形中的新点周围有多少空间，因此圆圈可以适应该空间的大小。该程序首先绘制一个选定的最大半径的圆圈，并继续前进，直到它反复找不到足够的空间来绘制最小半径的圆圈。

Bostock的例子使用了一个矩形空间来绘制圆圈，但是as Vivid D demonstrated，它可以适应其他形状。