使用cytoscape.js如何同时显示节点间弧线的箭头和自定义标签？

问题描述：

随着cytoscape.js我想在同一时间得到两方面的影响：使用cytoscape.js如何同时显示节点间弧线的箭头和自定义标签？

到秀指向的箭头的弧线节点和

到节目之间定做节点之间的圆弧标签。

有了下面的代码，我只能看到弧形标签，而不是箭头。

如果我从代码去除段

样式：{ '标签'： '数据（标签）'}，

然后我可以得到箭头是显示但弧标签消失。

我打算在各种单独的js库等相对复杂的系统中使用我的代码，因此我希望听到可以在各种条件下灵活使用的解决方案。感谢您的亲切帮助。

<!DOCTYPE> 

<html> 

<head> 
    <title>cytoscape-springy.js demo</title> 
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> 

    <script src="jquery.min.js"></script> 
    <script src="cytoscape.min.js"></script> 
    <script src="springy.js"></script> 
    <script src="./cytoscape-springy.js"></script> 

    <style> 

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


    </style> 

    <script> 
     $(function(){ 

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

       layout: { 
        name: 'springy', 
        directed: true 
       }, 

       style: [ 

        { 
         selector: 'node', 
         css: { 
          'content': 'data(name)' 
         } 
        }, 

        { 
         selector: 'edge', 

         // to get a custom label shown for each arc 
         style: { 
         'label': 'data(label)' 
         }, 

         // to get an arrowhead shown for each arc 
         css: { 
          'curve-style': 'bezier', 
          'target-arrow-shape': 'triangle', 
          'target-arrow-color': 'black', 
          'line-color': 'black', 
          'width': 3 
         } 

        } 
       ], 

       elements: { 
        nodes: [ 
         { data: { id: 'a', name: 'a' } }, 
         { data: { id: 'b', name: 'b' } }, 
         { data: { id: 'c', name: 'c' } } 
        ], 
        edges: [ 
         { data: { source: 'a', target: 'b', label: 'a_to_b' } }, 
         { data: { source: 'b', target: 'c', label: 'b_to_c' } }, 
         { data: { source: 'c', target: 'a', label: 'c_to_a' } } 
        ] 
       }, 
      }); 

     }); 
    </script> 
</head> 

<body> 
    <h1>cytoscape-springy demo</h1> 

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

</body> 

</html>

答

指定一个按键 - 一个style或css关键 - 但不能同时使用。

    style: { 
         'label': 'data(label)', 
         'curve-style': 'bezier', 
         'target-arrow-shape': 'triangle', 
         'target-arrow-color': 'black', 
         'line-color': 'black', 
         'width': 3 
        }

使用cytoscape.js如何同时显示节点间弧线的箭头和自定义标签？

相关推荐