Question

我想使用 unbundled-bezier 样式在我的Cotoscape.js图形中创建漂亮的曲线边缘。根据数据库，我必须自动设置控制点距离，所以我提出了以下代码：

{
        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()映射，并在想要修改边缘时更改边的数据。

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

1 个答案: