使用 cytoscape 的布局扩展时无法读取 null 的属性（读取“isHeadless”）

Question

我试图在我的反应应用程序中使用“cose-bilkent”布局扩展，当布局名称从内置“grid”更改为“cose-bilkent”时，它会抛出一个错误

“无法读取 null 的属性（读取 'isHeadless'）”

由于我在在线代码编辑器上运行此代码，因此 headless 应为 false，如文档所述：

要显式运行无头实例（例如在浏览器中），您可以将 options.headless 指定为 true。

所以我尝试明确给出“headless：false”，但我仍然遇到相同的错误。我还尝试了其他库，例如 spread、cola 来交叉检查它，当我运行它时，我收到相同的控制台错误。

当导航到 cytoscape.cjs.js 的行号 18789.35 时，它具有以下类似的代码

headless : function () : this.__privateRenderer.isHeadless()

    import "./styles.css";
import { useRef, useEffect } from "react";
import cytoscape from "cytoscape";
import COSEBilkent from "cytoscape-cose-bilkent";
import cola from "cytoscape-cola";
import spread from "cytoscape-spread";
import CytoscapeComponent from "react-cytoscapejs";
import Cytoscape from "cytoscape";

Cytoscape.use(cola);

export default function App() {
  const containerRef = useRef(null);

  useEffect(() => {
    const config = {
      container: containerRef.current,
      layout: {
        name: "cola"
      },
      zoom: 1,

      elements: {
        nodes: [
          { data: { id: "1", label: "IP 1", type: "ip" } },
          { data: { id: "2", label: "Device 1", type: "device" } },
          { data: { id: "3", label: "IP 2", type: "ip" } },
          { data: { id: "4", label: "Device 2", type: "device" } },
          { data: { id: "5", label: "Device 3", type: "device" } },
          { data: { id: "6", label: "IP 3", type: "ip" } },
          { data: { id: "7", label: "Device 5", type: "device" } },
          { data: { id: "8", label: "Device 6", type: "device" } },
          { data: { id: "9", label: "Device 7", type: "device" } },
          { data: { id: "10", label: "Device 8", type: "device" } },
          { data: { id: "11", label: "Device 9", type: "device" } },
          { data: { id: "12", label: "IP 3", type: "ip" } },
          { data: { id: "13", label: "Device 10", type: "device" } }
        ],
        edges: [
          {
            data: { source: "1", target: "2", label: "Node2" }
          },
          {
            data: { source: "3", target: "4", label: "Node4" }
          },
          {
            data: { source: "3", target: "5", label: "Node5" }
          },
          {
            data: { source: "6", target: "5", label: " 6 -> 5" }
          },
          {
            data: { source: "6", target: "7", label: " 6 -> 7" }
          },
          {
            data: { source: "6", target: "8", label: " 6 -> 8" }
          },
          {
            data: { source: "6", target: "9", label: " 6 -> 9" }
          },
          {
            data: { source: "3", target: "13", label: " 3 -> 13" }
          }
        ]
      },

      pannable: true,
      position: {
        // the model position of the node (optional on init, mandatory after)
        x: 600,
        y: 100
      },
      style: [
        // the stylesheet for the graph
        {
          selector: "node",
          style: {
            "text-valign": "center",
            "background-color": "#9D2F2E",
            label: "data(id)"
          }
        },

        {
          selector: "edge",
          style: {
            width: 6,
            "line-color": "#ccc",
            "target-arrow-color": "#dfr",
            "target-arrow-shape": "triangle",
            "curve-style": "bezier",
            label: "data(label)"
          }
        }
      ]
    };

    cytoscape(config);
      }, []);
    
      return <div ref={containerRef} style={{ height: "100vh", width: "100vw" }} />;
    }

上面是我正在运行的代码。

如果我在某处出错，请输入您的任何意见或任何说明。

提前致谢！

Answer 1

如果您仍然没有解决这个问题。 尝试重写下面的代码。

const cy = cytoscape(config)

cy.layout({
  name: 'cola'
}).run()

然后，删除或更改您的代码。

layout: {
  name: "cola"
},

您需要设置其他布局选项（例如随机、同心...） https://js.cytoscape.org/#layouts

参考（关于layout.run）

请注意，您必须调用layout.run()才能使其影响图形。

https://js.cytoscape.org/#layout.run

Answer 2

我参加聚会有点晚了，但偶然发现了同样的问题。 这是我的案例中发生的事情：

• 更新

  <input>

  字段中的文本。
• 单击 cy (cytoscape)

  <div>

  触发更改。
• OnChange 事件触发 Call 函数，更新 cy 结构（即添加新节点）。
• OnMouseDown 事件触发 cy update 抛出“无法读取 null 的属性（读取 'isHeadless'）”异常。

修复方法是先处理 OnMouseDown 事件，然后进行更新：

<input onchange="javascript:call()"></input>
function call(e){
    setTimeout(() => updateCytoscape(), 1) // Avoid Headless error in Cytoscape
}