Question

我在标签上使用多行选项（使用\ n描绘行），并且想知道第二行是否可以使用不同的字体大小（在示例中，“ test”要小一些）字体大小

Answer 1

如果您确实需要此功能，则可以使用cytoscape-node-html-label扩展名（您可以找到here）。根据文档，您可以使用以下代码来获取多行多样式标签：

document.addEventListener("DOMContentLoaded", function() {
  var sampleDataset = [{
    group: "nodes",
    data: {
      id: "16150999",
      name: "xps plrmr",
      type: 0,
      code: "7704322293"
    },
    classes: "class1"
  }];
  var mainNodeDiameter = 20;
  var otherNodesDiameter = 17;

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

    minZoom: 0.1,
    maxZoom: 3,
    zoom: 0.5,

    style: [{
        selector: "node", // default node style
        style: {
          width: mainNodeDiameter + "px",
          height: mainNodeDiameter + "px",
          "overlay-padding": "5px",
          "overlay-opacity": 0,
          "z-index": 10,
          "border-width": 2,
          "border-opacity": 0
        }
      },
      {
        selector: "node[type=0]",
        style: {
          "background-color": "#7CACC2"
        }
      },
      {
        selector: "edge", // default edge style
        style: {
          "curve-style": "unbundled-bezier",
          "control-point-distance": 30,
          "control-point-weight": 0.5,
          opacity: 0.9,
          "overlay-padding": "3px",
          "overlay-opacity": 0,
          label: "data(title)",
          "font-family": "FreeSet,Arial,sans-serif",
          "font-size": 9,
          "font-weight": "bold",
          "text-background-opacity": 1,
          "text-background-color": "#ffffff",
          "text-background-padding": 3,
          "text-background-shape": "roundrectangle",
          width: 1
        }
      },
      {
        selector: "node:selected",
        style: {
          "border-width": 2,
          "border-style": "solid",
          "border-color": "#3f3f3f",
          "border-opacity": 1
        }
      }
    ],

    layout: {
      name: "random"
    },
    elements: sampleDataset
  }));

  // add html labels to cytoscape
  cy.nodeHtmlLabel([{
    query: "node[type=0]",
    cssClass: "cy-title",
    valign: "top",
    valignBox: "top",
    tpl: function(data) {
      return '<div><p class="cy-title__name">' + data.name + '</p><p class="cy-title__info">' + data.code + "</p></div>";
    }
  }]);
  
  // fit cy to viewport
  cy.ready(function () {
    cy.fit();
    cy.center();
  });
});

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

#cy {
  height: 100%;
  width: 100%;
  float: left;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
}

h1 {
  opacity: 0.5;
  font-size: 1em;
  font-weight: bold;
}

p {
  margin: 0;
  padding: 0;
}

.cy-title {
  text-align: center;
  font-size: 13px;
  width: 130px;
  color: #2b2b2b;
  background: radial-gradient(#87CeFa, #7B68EE);
  text-transform: capitalize;
}

.cy-title__name {
  font-size: 1.5em;
}

.cy-title__info {
  font-size: 0.9em;
}

<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>
  <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
  <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-node-html-label@1.1.3/dist/cytoscape-node-html-label.min.js"></script>
</head>

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

</html>

这样，您可以为每个标签使用html样式。

Answer 2

就像Stephen提到的那样，node-html-label是一个很好的标签。您可能还对popper扩展名感兴趣：

https://www.npmjs.com/package/cytoscape-popper

popper扩展名稍微灵活一些，但是html-label有点自动。看看两者，看看哪个最适合您的项目。

请始终在扩展名列表中查看最新列表：http://js.cytoscape.org/#extensions

cytoscape js多行标签-第二行使用不同的CSS规则

2 个答案: