简体繁体 English

为什么D3 Pack布局意外崩溃？

[英]Why is d3 pack layout crashing unexpectedly?

原文 2013-08-17 20:39:35 7 1 javascript/ svg/ d3.js/ circle-pack

My code is here on bl.ocks.org: 我的代码是在这里上bl.ocks.org：

在此处输入图片说明

Change the value of the select tag to limit the number of circles. 更改选择标记的值以限制圈数。 If you don't play with it much it appears to work, but particular instances (for example select 10 for TE then select 247) crash every time. 如果您玩的不多，它似乎可以工作，但是特定实例（例如，为TE选择10，然后选择247）每次都会崩溃。 If you check the console, you'll see that the line in question is nodes = pack.nodes(data); 如果检查控制台，您会看到问题所在的行是nodes = pack.nodes(data); . 。 I see two possibilites: either this is a bug with d3's pack layout, or my data is getting messed up. 我看到了两种可能性：要么这是d3包布局的错误，要么我的数据混乱了。 Can you tell if either of these is the case, and if so, what the particular problem is? 您能判断出这两种情况中的任何一种吗？如果是，具体问题是什么？

1 个解决方案

There's a bug in your code causing child nodes to be duplicated. 您的代码中存在一个错误，导致子节点重复。 Since children are duplicated, there's an infinite loop in the pack layout. 由于子代是重复的，因此包布局中存在无限循环。

I discovered this by setting a breakpoint in the debugger and then pausing the code after letting it get stuck for a little bit. 我是通过在调试器中设置一个断点，然后在让代码卡住一点之后暂停代码来发现此问题的。 Sure enough, it was stuck in a for loop where the node's _pack_next node was itself, causing an infinite loop. 果然，它被卡在for循环中，该循环中该节点的_pack_next节点本身就是一个循环，从而导致无限循环。 And it was easy to see duplicates in the children; 而且很容易看到孩子们的重复。 for example, e.filter(function(d) { return d.name === "Jermichael Finley"; }) returned two nodes, rather than one. 例如， e.filter(function(d) { return d.name === "Jermichael Finley"; })返回了两个节点，而不是一个。