React+（06）：修改选中节点的样式和边的样式
import React, {useRef, useEffect} from "react";
import vis from "vis";
const nodes = new vis.DataSet([
{id: 1, label: '博客\n内容', shape: 'box', color: {background: '#222831',}},
{id: 2, label: '前端', shape: 'circle', color: {background: '#355c7d',}},
{id: 3, label: '后端', shape: 'circle', color: {background: '#6a2c70', border: "#fff"}},
{id: 4, label: '数据库', shape: 'circle', color: {background: '#b83b5e',}},
{id: 5, label: '大数据', shape: 'circle', color: {background: '#f08a5d',}},
{id: 21, label: 'React', shape: 'circle', color: {background: '#355c7d',}},
{id: 22, label: 'Vue', shape: 'circle', color: {background: '#355c7d',}},
{id: 31, label: 'SpringBoot', shape: 'circle', color: {background: '#6a2c70',}},
{id: 32, label: 'Django', shape: 'circle', color: {background: '#6a2c70',}},
]);
// create an array with edges
const edges = new vis.DataSet([
{from: 1, to: 2},
{from: 1, to: 3},
{from: 1, to: 4},
{from: 1, to: 5},
{from: 2, to: 21},
{from: 2, to: 22},
{from: 3, to: 31},
{from: 3, to: 32},
]);
const data = {
nodes: nodes,
edges: edges
};
const options = {
nodes: {
shape: 'circle',
shadow: true,
color: {
background: "#fff",
border: '#fff',
},
font: {
color: '#fff',
},
borderWidth: 2,
},
edges: {
shadow: true,
width: 2,
color: {
color:"black"
}
},
};
const HomeNetworkGraph = () => {
const containerRef = useRef(null);
useEffect(() => {
const network = new vis.Network(containerRef.current, data, options);
})
return (
<div ref={containerRef} style={{width: '800px', height: '600px'}}>
</div>
)
}
export default HomeNetworkGraph