Cytoscape.js 中的自动贝塞尔边缘

Question

我想使用 unbundled-bezier 样式在我的 Cotoscape.js 图表中创建漂亮的弯曲边缘。根据数据库，我必须自动设置 control-point-distance(s)，所以我想出了以下代码：

{
        selector: 'edge',
        css: {
            'curve-style': 'unbundled-bezier',
            'target-arrow-shape': 'triangle',
            'control-point-weights': '0.25 0.75.',
            'control-point-distance': function( ele ){
               console.log(ele.source().position());

               var pos1 = ele.source().position().y;
               var pos2 = ele.target().position().y;
               var str = '' + Math.abs(pos2-pos1) + 'px -' + Math.abs(pos2-pos1) + 'px';

                    console.log(pos1, pos2, str);
                    return str;
                }
            }
        }

我的问题是，图形是用直线渲染的，而曲线只有在我点击一些时才会出现。另外，当我移动节点时，曲线会随着节点很好地移动，但节点位置 (ele.source().position().y) 不会改变

Answer 1

样式函数应该是纯函数。你的在技术上不是：它取决于边缘数据之外的状态。

可以使用任意函数指定样式的唯一方法是连续轮询该函数。那将是 hacky 并且非常昂贵。

如果您想使用自定义函数，您必须使用纯函数。重写您的函数以仅依赖边缘的数据或使用直通data() 映射并在您想要修改边缘时更改边缘的数据。