reactjs 为什么更新边大小会导致边消失

gopyfrb3  于 2022-11-04  发布在  React
关注(0)|答案(1)|浏览(148)

我们正在从sigma v1升级到sigma v2
我正在使用这个react-sigma库:https://github.com/sim51/react-sigma
我尝试使用一个公式来更改边的大小,该公式取决于minEdgeSize和maxEdgeSize

const size = minEdgeSize + (maxEdgeSize - minEdgeSize) * (e.weight?e.weight:0);

现在的问题是,由于某种原因,这会导致边缘消失
此useEffect会导致边缘消失:

useEffect(()=>{
        const {minEdgeSize, maxEdgeSize} = graphSettings;
        graph.updateEachEdgeAttributes((edgeId, e)=>{
            const size = minEdgeSize + (maxEdgeSize - minEdgeSize) * (e.weight?e.weight:0);

            return {
                ...e,
                size,
            };
        });
    }, [graphSettings.minEdgeSize, graphSettings.maxEdgeSize]);

是的,此处的大小是有效的整数值
最初,我是这样向网络添加边的:

visibleEdges.forEach((edge)=>{
        graph.addDirectedEdge(edge.source, edge.target, {type: 'arrow', color: 'rgb(94, 91, 91)', size: edge.size?edge.size:1});
    });

下面是sigma容器:

<SigmaContainer
            settings={{
                nodeProgramClasses: {image: getNodeProgramImage(), circle: CircleNodeProgram},
                edgeProgramClasses: {
                    arrow: ArrowEdgeProgram,
                },
                ...graphSettings,
            }}
            style={{height: '500px', background: props.noBackground ? 'white' : mainBackgroundColor}}
        >

我从这里得到箭头程序:

import ArrowEdgeProgram from 'sigma/rendering/webgl/programs/edge.arrow';
wlsrxk51

wlsrxk511#

对于任何想知道的人,这是通过在创建边时设置权重属性来修复的,如下所示:

visibleEdges.forEach((edge)=>{
        graph.addDirectedEdge(edge.source, edge.target, {type: 'arrow', color: 'rgb(94, 91, 91)', size: edge.size?edge.size:1});
    });

更改为:

graph.addDirectedEdge(edge.source, edge.target, {type: 'arrow', color: 'rgb(94, 91, 91)', weight: edge.weight || 0, size: getEdgeSize(edge)});

注意:getEdgeSize只是一个函数,我创建它是为了根据一些变量来计算大小。

相关问题