d3.js圆包装沿线 [英] d3.js circle packing along a line
问题描述
我得到一个数据集，其中每个样本的大小（0-1000）和值（1-5级）。我想要沿线（域轴）显示不同大小的圆圈的数据，很像：
http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html?_r=1&
（请注意，即使具有相同有效税率的圈子也不重叠）
示例数据：
- sample 1：size 300 value 3.2
- sample 2：size 45 value 3.8
- size 4400 value 4.0
- sample 5：size 233 value 0.2
- sample 6：size 4000 value 4.2
- sample 1: size 300 value 3.2
- sample 2: size 45 value 3.8
- sample 3: size 4400 value 4.0
- sample 5: size 233 value 0.2
- sample 6: size 4000 value 4.2
如何使用一行上的圆圈显示上述数据（ size 决定直径，值决定大小线），这样圆不重叠？
我一直在看D3的包装布局，但从我可以告诉它不支持这种开箱。
Oooh，这是一个谜题...
如果你看看NYTimes图形的代码，它使用数据文件中的预先计算的坐标，因此没有太大用处。
但是，脚本顶部有一个未使用的变量声明，提示原始版本使用了 d3.geom.quadtree 来显示圈子。四叉树实际上不是布局方法;它用于创建相邻节点的搜索树，以便当您需要在给定区域中查找节点时，不必搜索整个集合。 此处的示例。
因此，四叉树可用于识别哪些数据点可能在x轴上彼此重叠。然后你必须找出你需要多少，以抵消它们，以避免重叠。变量半径使两个函数复杂化...
我有一个测试用例：
http://fiddle.jshell.net/6cW9u/5/
打包算法不完美：我总是添加新的圈子到现有的圈子的外面，没有测试他们是否可能适合更接近，所以有时你会得到大量额外的空白，当它只是圆的边缘碰撞对方。 （运行它几次来了解可能性 - 注意我有x变量作为随机正态分布，r变量作为随机均匀分布。）我也有一个堆栈溢出的递归方法在一个迭代N = 100 - 随机分布显然不能很好地分布到四叉树优化。
但它有基本的功能。
- ABR
如果您不能遵循我的代码注释的逻辑，更新
新的小提琴： http://fiddle.jshell.net / 6cW9u / 8 /
经过大量重新排列后，我得到了打包算法来搜索现有气泡之间的差距。我有排序顺序切换（所以最大的圈子首先添加）来显示小圈子可以添加在差距 - 虽然正如我在代码注释中提到的，这降低了四叉树搜索的效率。 / p>
还添加了各种装饰和过渡，以便您可以清楚地看到圆形如何定位，并将r刻度设置为平方根，因此区域（而不是半径）与数据中的值成正比（更现实，OP要求什么）。
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)
Example data:
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?
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...
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.
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.
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...
I've got a test case implemented here: http://fiddle.jshell.net/6cW9u/5/
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
Update
New fiddle here: 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.
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屋！
