我们正在从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';
1条答案
按热度按时间wlsrxk511#
对于任何想知道的人,这是通过在创建边时设置权重属性来修复的,如下所示:
更改为:
注意:
getEdgeSize
只是一个函数,我创建它是为了根据一些变量来计算大小。