我有一个React组件,一旦从服务器获取了一些数据,就会呈现一个Cytoscape dagre图。它似乎渲染一个画布占据了父亲<div id="cy" />
的右半部分。调用cy.center()
和cy.fit()
中心并使图形本身适合父div,但只显示了一半的可视化,因为包含的画布离屏幕一半。
设置以下CSS:
position: absolute;
left: 0;
right: 0;
在容器上,如在所有在线示例中一样,将使画布居中,但会破坏文档的流程。它也无法解决半角问题。
JSX:
if (moduleStructure) {
return (
<div
id="cy-module-structure"
style={{
position: "absolute",
left: 0,
top: 0,
height: "500px",
width: "1500px",
display: "block",
}}
/>
);
}
图生成代码。在获取数据后,由React挂钩调用此方法。
function generateGraph(nodes, edges) {
cytoscape.use(dagre);
const cy = cytoscape({
container: document.getElementById("cy-module-structure"),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: "dagre",
nodeDimensionsIncludeLabels: true,
},
zoom: 1,
pan: { x: 0, y: 0 },
style: [
{
selector: "node",
style: {
content: "data(label)",
"text-valign": "center",
"text-halign": "center",
"background-color": "#11479e",
},
},
{
selector: "edge",
style: {
width: 4,
"target-arrow-shape": "triangle",
"line-color": "#9dbaea",
"target-arrow-color": "#9dbaea",
"curve-style": "bezier",
},
},
],
elements: {
nodes,
edges,
},
});
cy.ready(() => {
cy.center();
cy.fit();
cy.resize();
});
}
最后是父JSX:
<div className="top-flex"> // flex-direction: row:
<Diagram /> // Cytoscape component
<div className="basic-info">
<H3>TEXT</H3>
<small>INFO</small>
</div>
</div>
理想情况下,图形应占用父div的整个宽度。在屏幕截图中,您可以看到上述效果。
问题是应用了更高级别的风格text-align: center
。删除它应该正确对齐的东西。
(1)您调整大小和适合的顺序是相反的。如果你之后要调整大小,那么适合没有意义。拟合发生在可用边界上。
(2)确保只在componentDidMount()
之后安装Cytoscape。
(3)container
必须像position:relative
或position:absolute
(绝对不是position:static
),以便container
的孩子可以相对于container
定位。 Cytoscape.js会默认设置position:relative
,所以除非你覆盖它,否则它会合理设置。