细胞景观中节点上的径向梯度

Question

我要添加以下内容CSS:

background: radial-gradient(circle at 3px 3px, green, black);

在节点体上使圆形在视觉上看起来像球体

引用 http://js.cytoscape.org/#style/node-body - 渐变部分 & #2091

我一直没能找到让它们工作的方法。以下是我一直在尝试的内容：

{
  width: 30,
  height: 30,
  background-fill: 'radial-gradient',
  background-gradient-stop-colors:'green black',
  background-gradient-stop-positions: '3px 3px'  
...
}

我哪里错了？

Answer 1

在 Cytoscape.js v3.3.0 中添加了渐变支持（请确保您的版本 >= 3.3.0）。

我用你的 CSS 试过一个例子，它工作正常（但我认为 background-gradient-stop-positions 的值需要是 0 到 100 之间的百分比）。

能否提供重现问题的代码片段？

Answer 2

我觉得你的代码没问题，也许你的版本不对？尽管如此，这里还是 Minimal, Complete, and Verifiable example of how to use the gradient:

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

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [{
    selector: "node[id = 'n0']",
    css: {
      "content": "data(id)",
      "text-valign": "center",
      "text-halign": "center",
      "height": "60px",
      "width": "60px",
      "background-fill": "radial-gradient",
      "background-gradient-stop-colors": "data(colors)", // get data from data.color in each node
      "background-gradient-stop-positions": "25 75 80"
    }
  }],

  elements: {
    nodes: [{
      data: {
        id: "n0",
        colors: "cyan magenta",
      }
    }]
  },

  layout: {
    name: "preset",
    padding: 5
  }
}));

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://unpkg.com/cytoscape@3.3.0/dist/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>

细胞景观中节点上的径向梯度

Radial gradient on a node in cytoscape

cytoscape.js