3

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

我想让我的图形的边缘直接向下，如下图所示：

向下的图边

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

我已经构建了一个 codepen 来演示我所看到的；但这是我构建图表的方式：

            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);

任何关于我如何将图形限制为上图中的行为的输入或方向都会很棒:)

4

1 回答 1

1

看起来它正在您的演示中工作。

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

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

于 2016-01-18T17:20:42.467 回答