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

Viv*_*idD 4 d3.js

我的目标是生成一个circle pack模仿这个:( 不要注意数字和颜色,此刻我只对圆形位置和半径感兴趣)

在此输入图像描述

根据d3js.org的一个例子,我创建了这个jsfiddle,结果如下:

在此输入图像描述

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

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

编辑:这个例子似乎更接近我想要的,我只是注意到了.

编辑2:灵感来自@AmeliaBR的想法,codepen.还没决定.预习:

在此输入图像描述

然后我减少了最大半径:

在此输入图像描述

最新最好的:max rad 12 min rad 3

在此输入图像描述

Ame*_*aBR 5

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

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

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

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

Bostock的例子使用了一个矩形空间来绘制圆圈,但正如Vivid D所展示的那样,它可以适应其他形状.