Cytoscape.js 边缘和箭头样式答案

【问题标题】：Cytoscape.js Edge and Arrow StyleCytoscape.js 边缘和箭头样式
【发布时间】：2018-02-02 16:33:26
【问题描述】：

如何向边缘添加方向？
如何标记我的顶点？

现在我有：

var cy = cytoscape({
        container: document.getElementById('cy'),
        elements: graph_to_elements(graph),
        style: 'node { background-color: blue; }'
      });

图是顶点和边。
graph_to_elements 是一个绘制输入图的函数。

我还可以在样式中添加哪些其他内容？当我尝试添加不同的属性时，它不起作用。

【问题讨论】：

标签： cytoscape.js

【解决方案1】：

当您想为边缘添加方向时，只需将“target-arrow-color”和“target-arrow-shape”属性添加到您的样式中即可。您可以在此处的一个非常简单的示例中看到这一点：http://js.cytoscape.org/#getting-started/specifying-basic-options

{
  selector: 'node',
  style: {
    'background-color': '#666',
    'label': 'data(id)' // here you can label the nodes 
  }
},

{
  selector: 'edge',
  style: {
    'width': 3,
    'line-color': '#ccc',
    'target-arrow-color': '#ccc',
    'target-arrow-shape': 'triangle' // there are far more options for this property here: http://js.cytoscape.org/#style/edge-arrow
}

在初始化图形时坚持cytoscape提供的符号，当你有多个样式要定义时，你要写：

style: [
   {
       selector: '...'
       style: {...}
   },
   {
       ... 
   }
]

【讨论】：