超过最大调用堆栈大小 jquery cytoscape

Question

我正在处理 cytoscape，jquery 处理大数据。我的 html 密码是

<script src="jquery.js"></script>
<script src="jquery.qtip.js"></script>
<script src="cytoscape.js"></script>
<script src="cytoscape-qtip.js"></script>
<script src="my_java_script.js"></script>`

我的java脚本代码是

$(function(){ // 
var cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: cytoscape.stylesheet()
.selector('node')
.css({'label': 'data(label)',
'width': '60px','height': '60px',      })
.selector('edge')
.css({'width': '10px','line-color':'#000000'})

.selector("#22").css({"line-color":"red"})
.selector("#44").css({"line-color":"red"})
.selector("#55").css({"line-color":"red"})

我有将近 20000 个选择器。由于数据量如此之大，我在 Chrome 70 浏览器中出现以下错误：

Uncaught RangeError: Maximum call stack size exceeded
at k (jquery.js:2)
at Object.fireWith [as resolveWith] (jquery.js:2)
at Function.ready (jquery.js:2)
at HTMLDocument.D (jquery.js:2)

我怎样才能摆脱这个？

Answer 1

考虑为您的选择器使用类而不是唯一 ID，您使用它们的方式不是您应该的方式。特别是如果选择器只是一种线条颜色，您始终可以使用更动态的选项来定义选择器：

style: [
    {
        selector: 'node',
        style: {
            'shape': 'data(faveShape)',
            'content': 'data(DisplayName)',
            'height': 'data(faveHeight)',
            'width': 'data(faveWidth)',
            'background-color': 'data(faveColor)',
            'line-color': 'data(faveLineColor)',
            'font-family': 'data(faceFontFam)',
            'font-size': 'data(faveFontSize)'
       }
    },
    ...

]

当您添加 nodes/edges 时，使用 python 代码中的逻辑并获取元素的颜色，之后，只需将该变量放入 cy.add()一切顺利：

cy.add({
    data: {
        id: 'yourId',
        ...
        faveLineColor: 'yourLineColor',
        ...

    },
    ...
});

超过最大调用堆栈大小 jquery cytoscape

maximum call stack size exceeded jquery cytoscape

jquery

cytoscape.js