d3.js - 生成视觉上令人愉悦的圆形包

Question

我的目标是生成一个 circle pack模仿这个:(根本不注意数字和颜色，目前我只对圆的位置和半径感兴趣)



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



我尝试过圆形包装布局，但结果更糟，有很多空白空间......

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

编辑:This example似乎更接近我想要的，我刚刚注意到。

编辑 2:灵感来自@AmeliaBR 的想法，codepen .还没有最后。预览:



然后我减少了最大半径:



最新和最好的:最大弧度 12 分钟弧度 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 ，它可以适应其他形状。