仅将父节点的标签定位到 Cytoscape.js 中的子节点的边上

Question

我正在尝试在 Cytoscape.js 中创建一个带有标签和从子节点到另一个节点的边的复合节点。如果您运行下面的代码段并将 b 移动到 a 以北，您会看到 a 的标签位于 b 和 [= 之间的边缘下方18=]，我不想要。

我可以将 a 和 a-1 的 z-compound-depth 设置为 top，但是 a 内部的边缘将不可见。

我想将边缘定位在 a 的顶部，但在 a 的标签下方。我怎样才能做到这一点？

cytoscape({
  container: document.querySelector(".graph"),
  elements: [
    {
      data: {
        id: "a",
      },
    },
    {
      data: {
        id: "a-1",
        parent: "a",
      },
    },
    {
      data: {
        id: "b",
      },
    },
    {
      data: {
        id: "a-1 -> b",
        source: "a-1",
        target: "b",
      },
    },
  ],
  style: [
    {
      selector: "node",
      style: {
        label: "data(id)",
      },
    },
    {
      selector: "#a,#a-1",
      style: {
        // "z-compound-depth": "top", // moves the edge below the a label, but also below the a node
      },
    },
  ],
});

body {
  margin: 0;
}

.graph {
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.17.0/cytoscape.min.js"></script>
<div class="graph"></div>

Answer 1

我知道这不能回答您的问题。但是你要求的东西不是简单有效地实现的。如果您只需要更好的可视化效果，将 line-opacity 应用于边缘的线条样式是另一种方法。

cytoscape({
  container: document.querySelector(".graph"),
  elements: [
    {
      data: {
        id: "a",
      },
    },
    {
      data: {
        id: "a-1",
        parent: "a",
      },
    },
    {
      data: {
        id: "b",
      },
    },
    {
      data: {
        id: "a-1 -> b",
        source: "a-1",
        target: "b",
      },
    },
  ],
  style: [
    {
      selector: "node",
      style: {
        label: "data(id)",
      },
    },
{
  selector: "edge",
  style: {
    label: "",
    "line-color": "red",
    "line-opacity": 0.5
  },
},
    {
      selector: "#a,#a-1",
      style: {
        // "z-compound-depth": "top", // moves the edge below the a label, but also below the a node
      },
    },
  ],
});

body {
  margin: 0;
}

.graph {
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.17.0/cytoscape.min.js"></script>
<div class="graph"></div>

仅将父节点的标签定位到 Cytoscape.js 中的子节点的边上

Position only the label of a parent node over the edge to a children node in Cytoscape.js

javascript

cytoscape.js