保持边缘分离 - 编程之家

如何解决保持边缘分离

我使用 ELK 创建了以下图表。

现在我正在尝试使用 cytoscape.js 和 cytoscape.js-elk 来生成相同的路由。但是我无法获得与 ELK 相同的边缘。

我不断收到以下信息：

我需要做什么才能获得与 ELK 生成的相同的边缘路由？我曾尝试更改 ELK 选项，但我认为这不是由 elk 引起的，我认为这是由 cytoscape 引起的。

我的风格

        const style = [ // the stylesheet for the graph
            {
                selector: 'node',style: {
                    shape: 'rectangle',label: 'data(id)','font-size': '0.5em',}
            },{
                selector: 'edge',style: {
                    'width': 1,'curve-style': 'taxi','line-color': '#ccc','color': 'blue','target-arrow-color': '#ccc','target-arrow-shape': 'triangle'
                }
            }
        ];

设置

        cytoscape.use(elk);

        var cy = cytoscape({
            container: document.getElementById('cy'),style: style,layout: { name: 'elk' }
        });

节点和边

        var nodes = cy.add([
            { group: 'nodes',data: { id: 'n1'} },{ group: 'nodes',data: { id: 'n2'} },data: { id: 'n4'} },data: { id: 'n9'} },data: { id: 'n10' } },data: { id: 'n555'} },data: { id: 'n556'} },data: { id: 'n557'} },])

        var edges = cy.add([
            { group: 'edges',data: { id: 'e3',source: 'n1',target: 'n4' } },{ group: 'edges',data: { id: 'e19',target: 'n9' } },data: { id: 'e12',source: 'n2',target: 'n1' } },data: { id: 'e842',data: { id: 'e15',target: 'n10' } },data: { id: 'e10',source: 'n4',target: 'n2' } },data: { id: 'e908',data: { id: 'e843',data: { id: 'e11',data: { id: 'e905',target: 'n555' } },data: { id: 'e862',target: 'n557' } },data: { id: 'e802',source: 'n9',data: { id: 'e7',source: 'n10',data: { id: 'e8',]);

选项


            var options = {
            name: "elk",nodeDimensionsIncludeLabels: true,// Boolean which changes whether label dimensions are included when calculating node dimensions
            fit: true,// Whether to fit
            padding: 20,// Padding on fit
            animate: false,// Whether to transition the node positions
            animateFilter: function (node,i) { return true; },// Whether to animate specific nodes when animation is on; non-animated nodes immediately go to their final positions
            animationDuration: 500,// Duration of animation in ms if enabled
            animationEasing: undefined,// Easing of animation if enabled
            transform: function (node,pos) { return pos; },// A function that applies a transform to the final node position
            ready: undefined,// Callback on layoutready
            stop: undefined,// Callback on layoutstop
            elk: {
                'algorithm': 'layered','layered.mergeEdges': 'false','layered.mergeHierarchyEdges': 'false','crossingMinimization.semiInteractive': true,'nodePlacement.strategy': 'NETWORK_SIMPLEX','layered.wrapping.additionalEdgeSpacing': 50,'spacing.nodeNode': 50,'spacing.nodeNodeBetweenLayers': 25,'spacing.edgeNode': 25,'spacing.edgeNodeBetweenLayers': 20,'spacing.edgeEdge': 20,'spacing.edgeEdgeBetweenLayers': 15,// All options are available at http://www.eclipse.org/elk/reference.html
                // 'org.eclipse.elk.' can be dropped from the Identifier
                // Or look at demo-demo.js for an example.
                // Enums use the name of the enum e.g.
                // 'searchOrder': 'DFS'
                //
                // The main field to set is `algorithm`,which controls which particular
                // layout algorithm is used.
            },priority: function (edge) { return null; },// Edges with a non-nil value are skipped when geedy edge cycle breaking is enabled
        };

        cy.layout(options).run();

解决方法

我遇到了同样的问题。您将遇到的另一个问题是线路将穿过节点，无需努力绕过它们。对我来说，这让出租车变得毫无用处，尽管我更喜欢它的外观。我不知道 cytoscape 中有任何可以解决这些问题的画线算法。

我不情愿的结论是我需要切换平台，并完全转移到 Sprotty 和 ELK（这可能用于绘制您的参考图）。

https://rtsys.informatik.uni-kiel.de/elklive/examples.html?e=general%2FmixingDirection https://www.typefox.io/blog/sprotty-a-web-based-diagramming-framework

使用 Sprotty 的示例显示实际围绕节点布线的线，以及节点上的连接点以显示重叠线实际连接的位置。此外，它使用 SVG 而不是光栅渲染系统。这可能会使字体更清晰，但也具有图表中可搜索文本的优势（如果您关心的话）。

我还没有尝试使用另一个框架，但它看起来不错。

我也面临着类似的问题，我的边缘相互重叠。要解决这个问题，您可以使用 curve-style: straight;。

Edges type demo