javascript - 如何配置图形以在不对节点位置进行硬编码的情况下显示向下指向的边缘？

Question

我正在尝试使用 cytoscape.js 和 cytoscope-cola.js 来实现这种效果扩展名。

我想让我的图表的边缘像这张照片一样直接向下:

而不是默认显示的无约束图。我正在使用可乐布局，因为我希望能够输入自定义边缘权重。

I've built a codepen to demonstrate what I'm seeing ;但这是我构建图表的方式:

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),
  layout: {
    name: 'cola',
    edgeLength: function( edge ){
      return edge._private.data.edge_weight;
    },
    flow: { axis: 'y', minSeparation: 50 },
    avoidOverlap: true,
    alignment: function( node ){
    },
    ready: function(){
      console.log('rendered graph')
      window.prev = undefined
    }
  },
  style: [
    {
      selector: 'node',
      css: {
        'content': 'data(name)'
      }
    },
    {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle'
      }
    }
  ],
  elements: {
    nodes: [
      { data: { id: 'j', name: 'J' } },
      { data: { id: 'e', name: 'E' } },
      { data: { id: 'k', name: 'K' } },
      { data: { id: 'l', name: 'L' } },
      { data: { id: 'g', name: 'G' } }
    ],
    edges: [
      { data: { source: 'j', edge_weight:80, target: 'e' } },
      { data: { source: 'j', edge_weight:80, target: 'l' } },
      { data: { source: 'e', edge_weight: 200, target: 'k' } },
      { data: { source: 'k', target: 'g' } }
    ]
  },
});
cy.minZoom(0.75);

任何关于我如何约束图表使其表现得像上图一样的输入或方向都很棒 :)

Answer 1

看起来它在您的演示中有效。

一般来说，您不能指望物理模拟布局能为您提供完美的树状结果您发布的示例图片是一个往往效果很好的特定图表。

如果您正在寻找合适的树布局，您应该查看 dagre:https://github.com/cytoscape/cytoscape.js-dagre