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

如何配置图形以显示向下指向边缘而无需硬编码节点位置？

1 个答案: