Cytoscape fcose约束不生效问题排查求助

需要实现绿色圆圈图标居左、文本“Hello”居右，二者垂直中心对齐的效果，但运行代码后元素位置随机，fcose布局的relativePlacementConstraint与alignmentConstraint未起到预期的确定性约束作用。

目标效果：

实际不良效果：

原代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"></script>
<script src="https://unpkg.com/layout-base/layout-base.js"></script>
<script src="https://unpkg.com/cose-base/cose-base.js"></script>
<script src="https://unpkg.com/cytoscape-fcose/cytoscape-fcose.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

<div class="chart" id="chart">
</div>

CSS #

.chart {
  color: red;
  width: 1000px;
  height: 400px;
  background-color: lightgrey;
}

JavaScript #

const greenCircleSVG = `<svg 
    viewBox="0 0 16 16" 
    xmlns="http://www.w3.org/2000/svg">
  <circle style="fill:#00ff00;stroke-width:1.32292" cx="8" cy="8" r="8" />
</svg>`;

const encodedGreenCircleSVG =
  "data:image/svg+xml;utf8," + encodeURIComponent(greenCircleSVG);

const cy = cytoscape({
  container: chart, // container to render in

  boxSelectionEnabled: false,

  style: [
    {
      selector: "node",
      css: {
        content: "data(id)",
        "text-valign": "center",
        "text-halign": "center"
      }
    },
    {
      selector: "#label",
      css: {
        label: "",
        "background-color": "gray",
        "border-width": "2",
        "border-color": "red",
        shape: "round-rectangle"
      }
    },
    {
      selector: "edge",
      css: {
        "curve-style": "bezier",
        "target-arrow-shape": "triangle"
      }
    },
    {
      selector: "#icon",
      css: {
        "background-image": encodedGreenCircleSVG,
        label: ""
      }
    },
    {
      selector: "#text",
      css: {
        label: "Hello",
        width: "label",
        shape: "rectangle",
        "background-opacity": "0"
      }
    },
    {
      selector: "#connection",
      css: {
        "line-opacity": "0",
        "target-arrow-shape": "none"
      }
    }
  ],

  elements: {
    nodes: [
      { data: { id: "label" } },
      { data: { id: "icon", parent: "label" }, position: { x: 215, y: 85 } },
      { data: { id: "text", parent: "label" }, position: { x: 300, y: 85 } }
    ],
    edges: [{ data: { id: "connection", source: "icon", target: "text" } }]
  },

  relativePlacementConstraint: [{ left: "icon", right: "text", gap: 500 }],

  alignmentConstraint: { horizontal: [["icon", "text"]] },

  layout: {
    name: "fcose",
    rows: 1
  }
});

问题原因与修复方案 #

核心问题 #

fcose布局的约束配置位置错误，relativePlacementConstraint和alignmentConstraint是fcose布局的专属参数，需要嵌套在layout对象内部，而非与layout同级。此外，原代码中gap设为500过大，且子节点手动设置的position会干扰布局计算。

修正后的代码 #

JavaScript（关键修改部分）

const cy = cytoscape({
  container: chart,
  boxSelectionEnabled: false,

  style: [
    {
      selector: "node",
      css: {
        content: "data(id)",
        "text-valign": "center",
        "text-halign": "center"
      }
    },
    {
      selector: "#label",
      css: {
        label: "",
        "background-color": "gray",
        "border-width": "2",
        "border-color": "red",
        shape: "round-rectangle",
        "fit-children": true // 让父容器自适应子节点大小
      }
    },
    {
      selector: "edge",
      css: {
        "curve-style": "bezier",
        "target-arrow-shape": "triangle"
      }
    },
    {
      selector: "#icon",
      css: {
        "background-image": encodedGreenCircleSVG,
        label: ""
      }
    },
    {
      selector: "#text",
      css: {
        label: "Hello",
        width: "label",
        shape: "rectangle",
        "background-opacity": "0"
      }
    },
    {
      selector: "#connection",
      css: {
        "line-opacity": "0",
        "target-arrow-shape": "none"
      }
    }
  ],

  elements: {
    nodes: [
      { data: { id: "label" } },
      { data: { id: "icon", parent: "label" } }, // 移除手动position
      { data: { id: "text", parent: "label" } }  // 移除手动position
    ],
    edges: [{ data: { id: "connection", source: "icon", target: "text" } }]
  },

  layout: {
    name: "fcose",
    rows: 1,
    // 将约束配置移到layout内部
    relativePlacementConstraint: [{ left: "icon", right: "text", gap: 10 }], // 调整gap为合理值
    alignmentConstraint: { vertical: [["icon", "text"]] } // 垂直方向中心对齐
  }
});

关键修改点 #

1. 约束配置位置修正：将relativePlacementConstraint和alignmentConstraint移入layout对象中，这是fcose布局识别约束的正确位置。
2. 对齐方向修正：使用vertical对齐规则，确保图标与文本在垂直方向中心对齐。
3. 移除手动position：删除子节点的position配置，让fcose布局根据约束自动计算位置。
4. 调整gap值：将gap从500改为10，设置图标与文本的合理间距。
5. 父容器自适应：给#label添加fit-children: true，让父容器自动包裹子元素。

内容的提问来源于stack exchange，提问作者Eric G