小编mtb*_*cht的帖子

我有一个 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: …