[英]can we change the color of node in react + graph
I am using the below package.我正在使用以下软件包。 I have the first and last node.我有第一个和最后一个节点。 I want to change its background color.我想改变它的背景颜色。
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 node have first:true
and last:true
.第一个节点有first:true
和last:true
。 can we change their background color ??我们可以改变他们的背景颜色吗?? like red and green https://www.npmjs.com/package/react-graph-vis像红色和绿色https://www.npmjs.com/package/react-graph-vis
here is my code https://stackblitz.com/edit/react-yvpt5j这是我的代码https://stackblitz.com/edit/react-yvpt5j
Just add color
property只需添加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 }
]
};
or you can change it dynamically on the basic of first and last properties或者您可以在 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);
Only add color:"red" and color:"green" on your nodes.仅在您的节点上添加 color:"red" 和 color:"green"。
like this:像这样:
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" }
],
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.