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的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>

cytoscape节点上的径向梯度

2 个答案: