javascript - 如何使 Cytoscape.js 画布尊重其父级的位置
问题描述
我有一个 React 组件,一旦从服务器获取了一些数据,它就会呈现一个 Cytoscape dagre 图。它似乎渲染了一个占据 parent 右半部分的画布<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
。删除应该正确对齐的东西。
推荐阅读
- ruby - 循环更新 ruby 中二维数组的整个列
- python - 尝试使用 jinja 模板创建 html 表并且不工作
- scala - 具有案例类方法的高阶函数
- java - Drools 函数无法使用严格模式解析方法
- matlab - 如何使用我的 HERE 凭据在 Matlab(自动驾驶工具箱)中进行身份验证?
- c++ - Using a struct variable as a formal parameter
- javascript - Discord.js - 你如何使用客户端类中的 guildUpdate?
- c - 错误:请求成员“time_c”不是 C 语言中的结构或联合
- r - R:将复杂的 XML 转换为数据框
- visual-studio-code - 从命令行禁用 VScode 中的扩展