我想添加一个具有React Flow Renderer中边缘的动态节点。我能够添加一个动态节点,但默认情况下无法连接边缘
我能够添加一个动态节点,但默认情况下无法连接边缘。如果添加一个新节点,我需要提供源和目标,如何提供动态节点的源和目标?
const initialNodes = [
{
id: 'a',
data: { label: 'Start' },
position: { x: 250, y: 25 },
style: { borderRadius: '50%', padding: '10px', color: 'white', backgroundColor: '#6ede87' }
},
{
id: 'z',
data: { label: 'End' },
position: { x: 250, y: 700 },
style: { borderRadius: '50%', padding: '14px', color: 'white', backgroundColor: 'red' }
},
];
const initialEdges = [
{ id: 'e1-2', source: edgeID, target: ++edgeID },
]
const [nodes, setNodes] = useState(initialNodes);
const [edges, setEdges] = useState(initialEdges);
//adding a new node :
const newNode = {
type:'selectorNode2',
id,
position: {
x: Math.random() * 500,
y: Math.random() * 500,
},
data: {
label: `${nameofNode}`,
},
style: {
background: typeofNode === 1 ? '#ff6700' : typeofNode === 2 ? '#ff0072' : typeofNode === 3 ? '#668de3' : '#fffff',
color: '#ffff',
border: '1px solid #222138',
width: 180,
borderRadius: typeofNode === 2 ? '50px' : '0px',
},
};
I am able to add a dynamic node but I am unable to connect the edge by default. If I add a new node I need to provide source and target, how do I provide source and target of a dynamic node?
const initialNodes = [
{
id: 'a',
data: { label: 'Start' },
position: { x: 250, y: 25 },
style: { borderRadius: '50%', padding: '10px', color: 'white', backgroundColor: '#6ede87' }
},
{
id: 'z',
data: { label: 'End' },
position: { x: 250, y: 700 },
style: { borderRadius: '50%', padding: '14px', color: 'white', backgroundColor: 'red' }
},
];
const initialEdges = [
{ id: 'e1-2', source: edgeID, target: ++edgeID },
]
const [nodes, setNodes] = useState(initialNodes);
const [edges, setEdges] = useState(initialEdges);
//adding a new node :
const newNode = {
type:'selectorNode2',
id,
position: {
x: Math.random() * 500,
y: Math.random() * 500,
},
data: {
label: `${nameofNode}`,
},
style: {
background: typeofNode === 1 ? '#ff6700' : typeofNode === 2 ? '#ff0072' : typeofNode === 3 ? '#668de3' : '#fffff',
color: '#ffff',
border: '1px solid #222138',
width: 180,
borderRadius: typeofNode === 2 ? '50px' : '0px',
},
};
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论