我们可以在react + graph中更改节点的颜色吗

我正在使用以下软件包。我有第一个和最后一个节点。我想更改其背景颜色。

nodes: [
      { id: 'Node 1',label: "Node 1",title: "node 1 tootip text",first:true},{ id: 2,label: "Node 2",title: "node 2 tootip text" },{ id: 3,label: "Node 3",title: "node 3 tootip text" },{ id: 4,label: "Node 4",title: "node 4 tootip text" },{ id: 5,label: "Node 5",title: "node 5 tootip text",last:true }
    ],

第一个节点具有first:truelast:true。我们可以改变它们的背景色吗? 像红色和绿色 https://www.npmjs.com/package/react-graph-vis

这是我的代码 https://stackblitz.com/edit/react-yvpt5j

wx071134 回答:我们可以在react + graph中更改节点的颜色吗

只需添加color属性

Working Demo

 const graph = {
    nodes: [
      { id: 'Node 1',label: "Node 1",title: "node 1 tootip text",first:true,color: "red" },{ id: 2,label: "Node 2",title: "node 2 tootip text" },{ id: 3,label: "Node 3",title: "node 3 tootip text" },{ id: 4,label: "Node 4",title: "node 4 tootip text" },{ id: 5,label: "Node 5",title: "node 5 tootip text",last:true,color: 'Green' }
    ],edges: [
      { from: 'Node 1',to: 2,label:'dddddd' },{ from: 'Node 1',to: 3,label:'adasd' },{ from: 2,to: 4 },to: 5 }
    ]
  };

或者您可以在第一个和最后一个属性的基础上动态更改它

    let obj = { nodes: [
          { id: 'Node 1',first:true},last:true }
        ] };
    
    let updatedNodes = obj.nodes.map(( o ) => {
    	let {first,last} = o;
    	first ? o.color = 'red' : last ? o.color = 'green' : null;
    	return {...o}
    });
    console.log(updatedNodes);

,

仅在节点上添加颜色:“红色”和颜色:“绿色”。

像这样:

nodes: [
  { id: 'Node 1',color: "red"},color: "green" }
],
本文链接:https://www.f2er.com/3047343.html

大家都在问