d3.js 沿线圆形包装 [英] d3.js circle packing along a line

问题描述

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

I got a data set that where each sample has a size (0-1000) and a value (grade 1-5). I want to visualise the data with circles of different sizes along a line (domain axis), much like:

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

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

(note that circles even with the same effective taxrate do not overlap)

示例数据:

• 示例 1:大小 300 值 3.2
• 示例 2:大小 45 值 3.8
• 示例 3:大小 4400 值 4.0
• 样本 5:大小 233 值 0.2
• 示例 6:大小 4000 值 4.2

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

How can the data above be visualised using circles on a line (size decides diameter, value decides approximate position on the line) so that circles do not overlap?

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

I've been looking at D3's packing layout, but from what I can tell it doesn't support this out of the box. Anyone got any ideas on how to approach this?

推荐答案

哦，这是一个谜题...

Oooh, this one was a puzzle...

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

If you look at the code for the NYTimes graphic, it uses pre-computed coordinates in the data file, so that's not much use.

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

However, there's an unused variable declaration at the top of the script that hints that the original version used d3.geom.quadtree to lay out the circles. The quadtree isn't actually a layout method; it is used to create a search tree of adjacent nodes, so that when you need to find a node in a given area you don't have to search through the whole set. Example here.

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

The quadtree can therefore be used to identify which of your datapoints might be overlapping each other on the x-axis. Then you have to figure out how much you need to offset them in order to avoid that overlap. The variable radii complicate both functions...

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

I've got a test case implemented here: http://fiddle.jshell.net/6cW9u/5/

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

The packing algorithm isn't perfect: I always add new circles to the outside of existing circles, without testing whether they could possibly fit closer in, so sometimes you get significant extra whitespace when it is just the far edges of circles bumping into each other. (Run it a few times to get an idea of the possibilities -- note that I've got x-variables distributed as random normal and r-variables distributed as random uniform.) I also got a stack overflow on the recursive methods during one iteration with N=100 -- the random distribution clearly wasn't distributed well enough for the quadtree optimization.

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

But it's got the basic functionality. Leave a comment here if you can't follow the logic of my code comments.

--ABR

新小提琴:http://fiddle.jshell.net/6cW9u/8/

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

After a lot of re-arranging, I got the packing algorithm to search for gaps between existing bubbles. I've got the sort order switched (so that biggest circles get added first) to show off how little circles can get added in the gaps -- although as I mention in the code comments, this reduces the efficiency of the quadtree search.

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

Also added various decoration and transition so you can clearly see how the circles are being positioned, and set the r-scale to be square root, so the area (not radius) is proportional to the value in the data (which is more realistic, and what the O.P. asked for).

这篇关于d3.js 沿线圆形包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！