Question

我想在节点之间使用节点和链接绘制一个简单的图形。问题是我希望根据变量设置链接的厚度，因此我不能为此预先确定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 }？

Answer 1

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

    // 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）作为节点名称，因此当您想要定义边缘的样式时，您始终可以通过使用它来获取其样式的边缘数据。相同的方法数据（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'
});

Cytoscape JS节点厚度

1 个答案: