3

I want to draw a simple graph with Nodes and Links between Nodes. The thing is that I want the thickness of the Links to be set depending on a variable, so I cannot pre-determine a CSS class for that.

The code is from the example 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' } },
    ]
  },
});

How to add this kind of feature to the { data } ?

4

1 回答 1

3

您始终可以像这样引用边缘的数据：

    // 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'
                }
            }
        ],
    });

当您定义节点的样式时，您使用 data(id) 作为节点名称，因此当您想要定义边的样式时，您始终可以使用相同的方法 data 获取边的样式数据（无论你想得到什么）。

当您定义边缘时，您可以这样做：

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'
});
于 2018-03-07T17:14:59.450 回答