如果您查看NYTimes图形的代码,它会在数据文件中使用预先计算的坐标,因此没有多大用处.

但是,脚本顶部有一个未使用的变量声明,暗示原始版本使用d3.geom.quadtree来布置圆圈.四叉树实际上不是布局方法;它用于创建相邻节点的搜索树,因此当您需要在给定区域中查找节点时,您不必搜索整个集合. Example here.

因此,四叉树可用于识别哪些数据点可能在x轴上相互重叠.然后你必须弄清楚你需要多少偏移它们以避免重叠.变量半径使两个函数复杂化……

我在这里实现了一个测试用例：
http://fiddle.jshell.net/6cW9u/5/

打包算法并不完美：我总是在现有圆圈的外部添加新的圆圈,而不测试它们是否可能更贴近,所以有时候当圆圈的边缘相互碰撞时,你会得到明显的额外空白. (运行几次以了解可能性 – 请注意,我将x变量分布为随机正态和r变量分布为随机均匀.)我在一个递归方法中也有一个堆栈溢出N = 100的迭代 – 随机分布显然不能很好地分布为四叉树优化.

但它有基本的功能.如果您不能遵循我的代码注释的逻辑,请在此处发表评论.

–ABR

更新

这里有新的小提琴：http://fiddle.jshell.net/6cW9u/8/

经过大量的重新安排,我得到了打包算法来寻找现有泡沫之间的差距.我已经切换了排序顺序(以便首先添加最大的圆圈)来展示如何在空白中添加小圆圈 – 尽管正如我在代码注释中提到的那样,这会降低四叉树搜索的效率.

还添加了各种装饰和过渡,以便您可以清楚地看到圆圈的定位方式,并将r标度设置为平方根,因此面积(非半径)与数据中的值成正比(这更加真实,以及OP要求的内容).