代码之家  ›  专栏  ›  技术社区  ›  Patrick L.

Cytoscape JS节点厚度

  •  3
  • Patrick L.  · 技术社区  · 7 年前

    我想用 节点 链接 节点之间。问题是我想要 要根据变量设置的链接的数量,因此我无法为此预先确定CSS类。

    代码来自示例 http://js.cytoscape.org/demos/dagre-layout/

    var cy = window.cy = cytoscape({
      container: document.getElementById('cy'),
    
      boxSelectionEnabled: false,
      autounselectify: true,
    
      layout: {
        name: 'dagre'
      },
    
      style: [
        {
          selector: 'node',
          style: {
            'content': 'data(id)',
            'text-opacity': 0.5,
            'text-valign': 'center',
            'text-halign': 'right',
            'background-color': '#11479e'
          }
        },
    
        {
          selector: 'edge',
          style: {
            'curve-style': 'bezier',
            'width': 4,
            'target-arrow-shape': 'triangle',
            'line-color': '#9dbaea',
            'target-arrow-color': '#9dbaea'
          }
        }
      ],
    
      elements: {
        nodes: [
          { data: { id: 'n0' } },
          { data: { id: 'n1' } },
          { data: { id: 'n2' } }
        ],
        edges: [
          { data: { source: 'n0', target: 'n1' } },
          { data: { source: 'n1', target: 'n2' } },
        ]
      },
    });
    

    如何将此类功能添加到 { data } ?

    1 回复  |  直到 7 年前
        1
  •  4
  •   Stephan T.    7 年前

    始终可以像这样引用边的数据:

        // Initialize cytoscape
        cy = window.cy = cytoscape({
            container: $('.cy'),
            boxSelectionEnabled: false,
            autounselectify: true,
            layout: {
                name: 'yourLayout'
            },
            style: [
                {
                    selector: 'node',
                    style: {
                        'shape': 'data(faveShape)',
                        'content': 'data(DisplayName)',
                        'height': 'data(faveHeight)',
                        'width': 'data(faveWidth)',
                        'background-color': 'data(faveColor)',
                        'line-color': '#a8eae5',
                        'font-family': 'Segoe UI,Helvetica Neue,Helvetica,Arial,Verdana',
                        'font-size': '15px',
                    }
                },
    
                {
                    selector: 'edge',
                    style: {
                         'curve-style': 'bezier',
                         'width': data(myWidth),
                         'target-arrow-shape': 'triangle',
                         'line-color': '#9dbaea',
                         'target-arrow-color': '#9dbaea'
                    }
                }
            ],
        });
    

    定义节点的样式时,使用数据(id)作为节点名称,因此,当要定义边的样式时,始终可以使用相同的方法data(whateverYouWantToGet)获取其样式的边的数据。

    定义边时,可以这样做:

    var x = 0; // This is your variable, alter it like you want
    var i = 0;
    cy.add({
       data: {
          id: ('edge' + (i)),
          source: n0, // first node for example
          target: n1,
          myWidth: x
       },
       position: {},
       group: 'edges',
       removed: false,
       selected: false,
       selectable: true,
       locked: false,
       grabbed: false,
       grabbable: true,
       classes: 'autorotate'
    });
    
    推荐文章