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

【问题标题】：can we change the color of node in react + graph我们可以更改 react + graph 中节点的颜色吗
【发布时间】：2019-11-23 01:56:43
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs graphviz react-graph-vis

【解决方案1】：

只需添加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 },
      { 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);

【讨论】：

感谢您的回答...我们可以停止zoom in and zoom out 并拖放吗？

【解决方案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" }
],

【讨论】：