Толщина узла Cytoscape JS

Я хочу нарисовать простой график с узлами и связями между узлами. Дело в том, что я хочу, чтобы толщина ссылок устанавливалась в зависимости от переменной, поэтому я не могу заранее определить класс 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 } ?


cytoscape.js cytoscape-web
person Patrick L.    schedule 07.03.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы всегда можете ссылаться на данные ребер следующим образом:

    // 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 (все, что вы хотите получить).

Когда вы определяете край, вы можете сделать это, например, так:

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'
});
person Stephan T.    schedule 07.03.2018