我們可以在react + graph中更改節點的顏色嗎

Question

我正在使用以下軟件包。 我有第一個和最后一個節點。 我想改變它的背景顏色。

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:true和last:true 。 我們可以改變他們的背景顏色嗎？？ 像紅色和綠色https://www.npmjs.com/package/react-graph-vis

這是我的代碼https://stackblitz.com/edit/react-yvpt5j

Answer 1

只需添加color屬性

工作演示

 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 },
      { from: 2, to: 5 }
    ]
  };

或者您可以在 first 和 last 屬性的基礎上動態更改它

 let obj = { 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 } ] }; let updatedNodes = obj.nodes.map(( o ) => { let {first, last} = o; first ? o.color = 'red' : last ? o.color = 'green' : null; return {...o} }); console.log(updatedNodes);

Answer 2

僅在您的節點上添加 color:"red" 和 color:"green"。

像這樣：

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" }
],