js.cytoscape 从左到右生成图表

Question

我正在使用js.cytoscape，需要生成一个从左到右的图表。

当我使用布局时，它会从上到下生成图表

code.js文件如下

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' } , position: { x: 0, y: 0 }  },
      { data: { id: 'n1' } , position: { x: 100, y: 0 } },
      { data: { id: 'n2' } , position: { x: 200, y: 0 } }

    ],
    edges: [
      { data: { source: 'n0', target: 'n1' } },
      { data: { source: 'n1', target: 'n2' } },

    ]
  },
});

当您将布局设置为 'preset' 时，聊天将按照给定的位置从左到右生成。但是当它应该使用用户给定的数据动态生成图表时，不可能定位所有节点。

请提出解决方案。谢谢

Answer 1

从 cytoscape.js-dagre documentation 开始，有一个布局选项可以更改图表的方向。只需添加到布局：

layout: {
    name: 'dagre'
    rankDir: 'LR', // 'TB' for top to bottom flow, 'LR' for left to right. default is undefined, making it plot top-bottom
},

js.cytoscape 从左到右生成图表

js.cytoscape generating graph left to right

javascript

cytoscape.js

flowchart