如何解决 Chrome 而不是 Firefox 使用 cola.js 和 d3.js 时出现的错误？

Question

更新：这里有一个 JSFiddle 表现出下述行为。 Comment/uncomment javascript 第 290/291 行在 Chrome 和不工作的网络之间切换。

我正在尝试设置一个力导向图，其中的组可以在单击时展开或折叠，类似于 GerHobbelt's example 的 d3.js。我将 cola.js 与 d3 一起使用，因为我需要几何约束。

我已经设置了 script that works fine in both Chrome and Firefox (versions 44.0.2403.125 and 39.0 respectively). That script visualizes this JSON network, which has seven nodes, five links, and three groups. If I switch to this network instead (comment line 309, uncomment line 310 in my script), which has a few hundred nodes and links, and 25 groups, then the Chrome javascript console gives me thousands of assertion failed errors as soon as it starts. The visualization is a little glitchy (nodes jump back and forth over the edges of group rectangles) but it seems to run okay despite the errors. Using the non-minified versions of cola and d3，所有错误都有以下堆栈跟踪：

generateConstraints @ cola.js:1479
generateGroupConstraints @ cola.js:1428
generateYGroupConstraints @ cola.js:1524
Projection.project @ cola.js:1673
Projection.yProject @ cola.js:1653
Projection.projectFunctions @ cola.js:1666
Descent.stepAndProject @ cola.js:2472
Descent.computeNextPosition @ cola.js:2508
Descent.rungeKutta @ cola.js:2527
Layout.tick @ cola.js:3543
(anonymous function) @ cola.js:4063
d3_timer_mark @ d3.js:2122
d3_timer_step @ d3.js:2102

在 Firefox 中，我在任一网络上都没有遇到任何错误。我现在可以使用 Firefox，但我不知道如何解决我在 Chrome 中遇到的错误。这是我的第一个 javascript 项目，所以我假设我在范围界定或函数定义方面做了一些愚蠢的事情。

对此的任何建议都会有所帮助；谢谢！

Answer 1

这个问题在 issue #130 的 webCola github 存储库中得到了解决（感谢 Tim Dwyer）。问题是我认为我在 JSFiddle 的第 313 行和第 314 行设置了节点边界，但节点属性似乎没有在我的 network() 函数中正确传递。我不明白为什么，但这显然是正在发生的事情。

Tim 的快速修复是在获取当前网络元素后在 init() 中设置节点边界。参见updated JSFiddle。

如何解决 Chrome 而不是 Firefox 使用 cola.js 和 d3.js 时出现的错误？

How do I resolve an error that shows up in Chrome but not Firefox using cola.js with d3.js?

javascript

cross-browser

d3.js