js.cytoscape从左到右生成图 [英] js.cytoscape generating graph left to right

问题描述

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

I am using js.cytoscape, and need to generate a graph from left to right.

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

when I use the layouts, it generate the chart from top to the bottom

code.js文件如下

code.js file is as follows

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' } },

    ]
  },
});

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

When you set the layout to 'preset' the chat is generated from left to right with the given positions. But it is not possible to position all the nodes when it supposed to generate chart dynamically using user given data.

请提出解决方案。
谢谢

Please suggest a solution. Thank you

推荐答案

截至 cytoscape.js-dagre文档，其中有一个布局选项可以更改图形的方向。只需添加到布局：

As of cytoscape.js-dagre documentation, there's a layout option that can change the direction of your graph. Simply add to layout:

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从左到右生成图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！