Question

我正在尝试将标签显示在中间位置，例如source --<sometext>--> target。

我正在阅读正式文档，但找不到答案。

这可以实现吗？

Answer 1

您可以看到here，cytoscape提供了一个简单的解决方案：

window.cy = cytoscape({
  container: document.getElementById('cy'),

  layout: {
    name: 'grid',
    cols: 2
  },

  style: [{
      "selector": "node[label]",
      "style": {
        "label": "data(label)"
      }
    },
    {
      "selector": "edge[label]",
      "style": {
        "label": "data(label)",
        "width": 3
      }
    },
    {
      "selector": ".autorotate",
      "style": {
        "edge-text-rotation": "autorotate"
      }
    }
  ],

  elements: [{
      data: {
        id: 'one'
      }
    },
    {
      data: {
        id: 'two'
      }
    }, {
      data: {
        source: 'one',
        target: 'two',
        label: 'autorotate (move my nodes)'
      },
      classes: 'autorotate'
    }
  ]
});

body {
  font-family: helvetica, sans-serif;
  font-size: 14px;
}

#cy {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

<html>

<head>
  <title>Labels demo</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

如何使边缘的标签仅显示在中间位置？

1 个答案: