Cytoscape.js，将标签文本置于边缘顶部

Question

我有一个与边缘内联绘制的标签，因此渲染效果不佳。有没有办法在边缘文本中添加背景形状之类的东西，以便在标签区域看不到边缘线？

Answer 1

您可以在初始化 cytoscape 样式表时将类添加到标签中：

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

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [{
      selector: "node",
      css: {
        "label": "data(label)",
        "text-valign": "center",
        "text-halign": "center",
        "height": "60px",
        "width": "60px"
      }
    },
    {
      selector: "edge",
      css: {
        "target-arrow-shape": "triangle"
      }
    },
    {
      selector: "edge[label]",
      css: {
        "label": "data(label)",
        "text-rotation": "autorotate",
        "text-margin-x": "0px",
        "text-margin-y": "0px"
      }
    },
    {
      selector: ".background",
      css: {
        "text-background-opacity": 1,
        "color": "#fff",
        "text-background-color": "#000"
      }
    },
    {
      selector: ".outline",
      css: {
        "color": "#fff",
        "text-outline-color": "#000",
        "text-outline-width": 3
      }
    },
    {
      selector: ".top-center",
      style: {
        "text-valign": "top",
        "text-halign": "center"
      }
    }
  ],
  elements: {
    nodes: [{
        data: {
          id: '1',
          label: 'outline'
        },
        classes: 'outline'
      },
      {
        data: {
          id: '2',
          label: 'background'
        },
        classes: 'background'
      },
      {
        data: {
          id: '3',
          label: 'top-center'
        },
        classes: 'top-center'
      },
      {
        data: {
          id: '4',
          label: 'none'
        }
      }
    ],
    edges: [{
        data: {
          source: "1",
          target: "2",
          label: "outline"
        },
        classes: "outline"
      },
      {
        data: {
          source: "2",
          target: "3",
          label: "background"
        },
        classes: "background"
      },
      {
        data: {
          source: "3",
          target: "4",
          label: "top-center"
        },
        classes: "top-center"
      },
      {
        data: {
          source: "4",
          target: "1",
          label: "none"
        }
      }
    ]
  },
  layout: {
    name: "circle"
  }
}));

cy.ready(function() {
  cy.layout({
    name: "circle"
  }).run();
});

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 75%;
  position: absolute;
  left: 0;
  top: 0;
  float: left;
}

<html>

<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
  <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
</head>

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

</html>

Cytoscape.js，将标签文本置于边缘顶部

Cytoscape.js, position label text on top of edge

cytoscape.js