Cytoscape.js 将多条边合并为一条（较粗的）边

Question

我正在使用 cytoscape.js 3.19.1，但我不知道如何将多条边合并为一条边，并增加那条边的权重。

Current view

我现在正在寻找一种解决方案，其中 2 条边合并为一条宽度为 2、3 条边合并为一条宽度为 3 等。

我正在使用此代码更改节点的颜色：

style: [
        {
            selector: 'node',
            css: {
                'content': 'data(name)',
                'text-outline-color': 'red',
            },
            style: {
                'background-color': 'data(color)',
                'label': 'data(name)',
                'color': "white",
            }
        },
        {
            selector: 'edge',
            css: {
                'curve-style': 'bezier',
                'target-arrow-shape': 'triangle'
            }
        }
    ],

这个 cytoscape 输入有效：{'nodes': [{'data': {'id': '1464848862', 'name': 'my_name', 'color': '#FFA00F'}}....

我现在可以对线宽做同样的事情，但我宁愿不必通过数据 'manually' 来弄清楚哪两个节点连接，发生的频率，定义线的粗细必须是，然后删除所有不再需要绘制的重复项。

还有其他方法吗？

非常感谢您的任何建议！

Answer 1

实际上，您可以在边缘使用一些不同的样式来实现这一点。 “haystack”或“straight”可能会有用。检查它们 https://js.cytoscape.org/demos/edge-types/

或者您可以使用 https://github.com/iVis-at-Bilkent/cytoscape.js-expand-collapse

检查其 demo 并折叠边缘。

Cytoscape.js 将多条边合并为一条（较粗的）边

Cytoscape.js combine multiple edges into one (thicker) edge

cytoscape

cytoscape.js