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
我从可以在官方 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>
谢谢 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,这对你有帮助。
如果您的节点指定 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
我从可以在官方 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>
谢谢 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,这对你有帮助。
如果您的节点指定 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