d3.js 沿线圆形包装

Question

我得到了一个数据集，其中每个样本都有一个大小(0-1000)和一个值(1-5 级)。我想用沿着一条线(域轴)的不同大小的圆圈来可视化数据，很像:

http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html?_r=1&

(注意，即使有效税率相同，圆圈也不重叠)

示例数据:

示例 1:大小 300 值 3.2

示例 2:大小 45 值 3.8

示例 3:大小 4400 值 4.0

示例 5:大小 233 值 0.2

示例 6:大小 4000 值 4.2

如何使用直线上的圆来可视化上述数据(大小决定直径，值决定直线上的大致位置)，以便圆不重叠？

我一直在查看 D3 的包装布局，但据我所知，它不支持开箱即用。任何人对如何解决这个问题有任何想法吗？

Answer 1

哦，这是一个谜题......

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

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

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

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

打包算法并不完美:我总是在现有圆圈的外部添加新圆圈，而没有测试它们是否可能适合更近的地方，因此有时当圆圈的远边缘相互碰撞时，您会得到大量额外的空白. (运行几次以了解可能性 - 请注意，我将 x 变量作为随机正态分布，将 r 变量作为随机均匀分布。)在一个过程中，我还遇到了递归方法的堆栈溢出N=100 的迭代——对于四叉树优化来说，随机分布显然分布得不够好。

但它有基本的功能。如果你不能按照我的代码注释的逻辑在这里发表评论。

--ABR

更新

新 fiddle 在这里:http://fiddle.jshell.net/6cW9u/8/

经过大量的重新安排，我得到了包装算法来搜索现有气泡之间的差距。我已经切换了排序顺序(以便首先添加最大的圆圈)以展示可以在间隙中添加多少小圆圈 - 尽管正如我在代码注释中提到的那样，这会降低四叉树搜索的效率。

还添加了各种装饰和过渡，以便您可以清楚地看到圆圈是如何定位的，并将 r-scale 设置为平方根，因此面积(而不是半径)与数据中的值成正比(这样更现实，以及 OP 的要求)。