In SigmaJs i get "Uncaught TypeError: Cannot read properties of undefined (reading 'process')" error

Question

我从可以在官方 SigmaJs github 存储库中找到的演示项目开始：https://github.com/jacomyal/sigma.js 错误如下：

Uncaught TypeError: Cannot read properties of undefined (reading 'process') sigma.js:626
at Sigma.process (sigma.js:626:1)
at Sigma._refresh (sigma.js:704:1)
at sigma.js:726:1

我可以在浏览器的控制台中看到它，解决方案使用“npm start”编译得很好。

我正在尝试使用 SigmaJs 创建一个解决方案，它可以从 Neo4j 数据库加载数据，然后渲染节点和边。我能够从数据库中获取数据，以能够处理的形式解析它。图形对象获取所有节点和边。在 UI 集群和标签与我的交换。到目前为止（在我看来）唯一不起作用的是节点未显示。

他们出于某种原因在某处获得了 true 的隐藏值。

该节点也有标签和标签，但这些是敏感数据。

我想不通。在 SigmaJs/demo/src/views/Root.tsx 中有一部分我不知道如何更改，或者不知道要更改什么。我不使用图像，但不管有没有这条线我都会得到同样的错误：

<div id="app-root" className={showContents ? "show-contents" : ""}>
      <SigmaContainer
        graphOptions={{ type: "directed" }}
        initialSettings={{
          nodeProgramClasses: { image: getNodeProgramImage() }, <----------------
          labelRenderer: drawLabel,
          defaultNodeType: "image", <-------- This line i got rid of.
          defaultEdgeType: "arrow",
          labelDensity: 0.07,
          labelGridCellSize: 60,
          labelRenderedSizeThreshold: 15,
          labelFont: "Lato, sans-serif",
          zIndex: true,
        }}
        className="react-sigma"
      >
        <GraphSettingsController hoveredNode={hoveredNode} />
        <GraphEventsController setHoveredNode={setHoveredNode} />
        <GraphDataController dataset={dataset} filters={filtersState} />
        {dataReady && (
          <>
            <div className="controls">
              <div className="ico">
                <button
                  type="button"
                  className="show-contents"
                  onClick={() => setShowContents(true)}
                  title="Show caption and description"
                >
                  <BiBookContent />
                </button>
              </div>
              <FullScreenControl
                className="ico"
                customEnterFullScreen={<BsArrowsFullscreen />}
                customExitFullScreen={<BsFullscreenExit />}
              />
              <ZoomControl
                className="ico"
                customZoomIn={<BsZoomIn />}
                customZoomOut={<BsZoomOut />}
                customZoomCenter={<BiRadioCircleMarked />}
              />
            </div>
            <div className="contents">
              <div className="ico">
                <button
                  type="button"
                  className="ico hide-contents"
                  onClick={() => setShowContents(false)}
                  title="Show caption and description"
                >
                  <GrClose />
                </button>
              </div>
              <GraphTitle filters={filtersState} />
              <div className="panels">
                <SearchField filters={filtersState} />
                <DescriptionPanel />
                <ClustersPanel
                  clusters={dataset.clusters}
                  filters={filtersState}
                  setClusters={(clusters) =>
                    setFiltersState((filters) => ({
                      ...filters,
                      clusters,
                    }))
                  }
                  toggleCluster={(cluster) => {
                    setFiltersState((filters) => ({
                      ...filters,
                      clusters: filters.clusters[cluster]
                        ? omit(filters.clusters, cluster)
                        : { ...filters.clusters, [cluster]: true },
                    }));
                  }}
                />
                <TagsPanel
                  tags={dataset.tags}
                  filters={filtersState}
                  setTags={(tags) =>
                    setFiltersState((filters) => ({
                      ...filters,
                      tags,
                    }))
                  }
                  toggleTag={(tag) => {
                    setFiltersState((filters) => ({
                      ...filters,
                      tags: filters.tags[tag] ? omit(filters.tags, tag) : { ...filters.tags, [tag]: true },
                    }));
                  }}
                />
              </div>
            </div>
          </>
        )}
      </SigmaContainer>
    </div>

Answer 1

谢谢 Tomaž Bratanič！！在对评论部分的存储库进行一些调查后，我发现了我的问题。
节点未显示，因为它们的隐藏值为 true。这发生在 https://github.com/jacomyal/sigma.js/blob/main/demo/src/views/GraphDataController.tsx

graph.forEachNode((node, { cluster, tag }) =>
      graph.setNodeAttribute(node, "hidden", ---> !clusters[cluster] || !tags[tag]), <---
    );

箭头之间的部分负责此值。在我的例子中，节点拥有的集群是一个列表，所以我必须像这样为它实现一个函数：

function isTagHidden(id: string): boolean {
    let ishidden = false;
    const { tags } = filters; <-- containts records of clusters and tags
    let node = graph.getNodeAttributes(id);
    node.tags.forEach((key: string) => {
      if (tags[key]) {
        ishidden = true;
      }
    });
    return ishidden;
  }

集群的另一个类似功能。

至于标题所指的主要问题，是简单的代码错位。在 root 文件中有一个启动动画的变量。

if (!dataset) return null;    
requestAnimationFrame(() => setDataReady(true));

我使用的是异步方法，所以我把这条线放在哪里很重要，否则我会给出一个空数据集，难怪为什么它是未定义的。所以我在检查后放置了它，一切正常！

我希望我说的很清楚，如果你参与 sigma.js，这对你有帮助。

Answer 2

如果您的节点指定 type，但未能在该类型的 Sigma 配置中实施 nodeProgramClasses，也会发生这种情况。

例如：

graph.addNode("Sushis", { size: 7, label: "Sushis", type: "border", color: GREEN });

renderer = new Sigma(this.graph, this.domNode, {
  nodeProgramClasses: {
    image: getNodeProgramImage(),
    // by commenting this out, the error will be thrown
//  border: NodeProgramBorder, 
  },
});

我在 PR 中发布了错误警告用户：https://github.com/jacomyal/sigma.js/pull/1248

In SigmaJs i get "Uncaught TypeError: Cannot read properties of undefined (reading 'process')" error

In SigmaJs i get "Uncaught TypeError: Cannot read properties of undefined (reading 'process')" error

typescript

react-dom

sigma.js