二、vis network配置项
// 节点
var nodes = new vis.DataSet([
{
id: 1,
label: "Node 1",
image: {
selected: require("@/assets/"),
unselected: require("@/assets/"),
},
},
{
id: 2,
label: "Node 2",
image: {
selected: require("@/assets/"),
unselected: require("@/assets/"),
},
},
{
id: 3,
label: "Node 3",
image: {
selected: require("@/assets/"),
unselected: require("@/assets/"),
},
},
{
id: 4,
label: "Node 4",
image: {
selected: require("@/assets/"),
unselected: require("@/assets/"),
},
},
{
id: 5,
label: "Node 5",
title: "5",
image: {
selected: require("@/assets/"),
unselected: require("@/assets/"),
},
},
]);
// 边
var edges = new vis.DataSet([
{ id: 1, from: 1, to: 3 },
{ id: 2, from: 1, to: 3 },
{ id: 5, from: 3, to: 1 },
{ from: 1, to: 2, title: "1-2", label: "1-2" },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
]);
// create a network
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges,
};
var options = {
interaction: {
//启用悬停
hover: true,
},
layout: {
//配置每次生成的节点位置都一样，参数为数字1、2等
randomSeed: 1
},
nodes: {
shape: "image",
size: 23,
color: {
background: "rgba(102, 51, 255, 0)",
},
font: {
color: "#fff",
},
shadow: {
enabled: true,
color: "rgba(153, 102, 204, 0.8)",
size: 40,
x: 0,
y: 0,
},
chosen: {
label: false,
node: function(values, id, selected, hovering) {
console.log(id, selected, hovering);
values.shadowColor = "rgba(255, 215, 0, 0.8)";
},
},
},
edges: {
hoverWidth: 0,
shadow: true,
arrows: {
//指向‘to’节点的箭头（在终点），middle（中间）、from（起点）箭头
to: {
enabled: true,
type: "arrow",
},
},
color: {
color: "#525A81",
highlight: "#FFBA30",
//需要在interaction中设置hover未true
hover: "#FFBA30",
opacity: 1.0,
},
font: {
color: "#fff",
size: 12, // px
strokeWidth：0,
},
// chosen: true,//选择或悬停在边上将根据默认值更改其特性，false则不变
},
};
network = new vis.Network(container, data, options);