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

D3.js 生成视觉上令人愉悦的圆形包,d3.js,D3.js,我的目标是生成一个类似以下内容的圆形包:(根本不关注数字和颜色,目前我只对圆形位置和半径感兴趣) 基于d3js.org中的一个示例,我创建了这个,结果是: 我尝试了圆形包装布局,但结果更糟,大量的空白空间 我怎样才能得到看起来像第一张照片的东西 编辑:似乎更接近我想要的,我刚刚注意到 编辑2:灵感来自@AmeliaBR idea。还没有定论。预览: 然后我减小了最大半径: 最新和最伟大的:最大rad 12 min rad 3 请参阅对主要问题的评论,了解这一问题是如何发展的 Mike B

我的目标是生成一个类似以下内容的
圆形包
:(根本不关注数字和颜色,目前我只对圆形位置和半径感兴趣)

基于d3js.org中的一个示例,我创建了这个,结果是:

我尝试了圆形包装布局,但结果更糟,大量的空白空间

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

编辑:似乎更接近我想要的,我刚刚注意到

编辑2:灵感来自@AmeliaBR idea。还没有定论。预览:

然后我减小了最大半径:

最新和最伟大的:最大rad 12 min rad 3

请参阅对主要问题的评论,了解这一问题是如何发展的

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

的最初目的是对一系列值进行采样,这样既不会创建重复的模式,也不会像真正的随机采样那样容易创建簇和间隙

Bostock的演示将采样算法与数据结构相结合,数据结构将数据点排序为树结构,该树结构被划分为将每个数据点放入其自身节点所需的任意多个分支。通过四叉树,Bostock可以快速判断每个添加到图形中的新点周围有多少空间,从而判断一个圆可以容纳多大的空间。该程序从绘制选定的最大半径的圆开始,并一直运行,直到反复找不到足够的空间来绘制最小半径的圆


博斯托克的例子使用了一个矩形空间来绘制圆,但是,它可以适应其他形状。

一个调整过的例子?是的,我基于这个例子。只是一个群体的情况。我试图进一步调整它,但这很难。很难获得第一张照片的整洁外观。这可能是一个非常困难的问题,我的感觉是。我不确定你的确切意思。在我看来,主要区别在于第一张图中的圆圈平均较大。在第一张图中,各种大小的圆圈均匀分布在较大的圆形区域中,而在第二张图中,较小的圆圈往往位于内部,而较大的圆圈位于区域的外围,除了靠近中心的一个大圆。第二张图的整体形状也不够接近圆形。绝对大小并不重要。嗯,听起来这是部队布局的“自然”结果。我想你需要自己动手。这可能会有帮助。那太好了!我喜欢这种成就感!