我们可以更改反应+图形中节点的颜色吗
can we change the color of node in 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:true
和 last:true
。我们可以改变他们的背景颜色吗?? 喜欢红色和绿色
https://www.npmjs.com/package/react-graph-vis
只需添加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 }
]
};
或者您可以根据第一个和最后一个属性动态更改它
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);
仅在您的节点上添加颜色:"red" 和颜色:"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" }
],
我正在使用以下软件包。我有第一个和最后一个节点。我想改变它的背景颜色。
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
只需添加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 }
]
};
或者您可以根据第一个和最后一个属性动态更改它
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);
仅在您的节点上添加颜色:"red" 和颜色:"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" }
],