vis.js 关系图 插件 配置项
关系图的配置
var options = {
nodes: {
borderWidth: 1,
borderWidthSelected: 1,
brokenImage: undefined,
chosen: true, //对选择及悬停做出反应
color: {
border: "#005cc9",
background: "#97C2FC",
highlight: {
border: "#005cc9",
background: "#97C2FC",
},
hover: {
border: "#005cc9",
background: "#97C2FC",
},
},
opacity: 1,
// fixed: {
// x: false,
// y: false,
// },
font: {
color: "#ffffff", //颜色
size: 16, // px
face: "arial", //字体 宋体
background: "none",
strokeWidth: 0, // px
strokeColor: "#ffffff",
align: "center",
multi: false,
vadjust: 0,
// bold: {
// color: "#343434",
// size: 14, // px
// face: "arial",
// vadjust: 0,
// mod: "bold",
// },
// ital: {
// color: "#343434",
// size: 14, // px
// face: "arial",
// vadjust: 0,
// mod: "italic",
// },
// boldital: {
// color: "#343434",
// size: 14, // px
// face: "arial",
// vadjust: 0,
// mod: "bold italic",
// },
// mono: {
// color: "#343434",
// size: 15, // px
// face: "courier new",
// vadjust: 2,
// mod: "",
// },
},
// group: undefined,
// heightConstraint: false,
// hidden: false,
// icon: {
// face: "FontAwesome",
// code: undefined,
// weight: undefined,
// size: 50, //50,
// color: "#2B7CE9",
// },
// image: undefined,
// imagePadding: {
// left: 0,
// top: 0,
// bottom: 0,
// right: 0,
// },
// label: undefined,
// labelHighlightBold: true,
// level: undefined,
// mass: 1,
// physics: true,
// scaling: {
// min: 10,
// max: 30,
// label: {
// enabled: false,
// min: 14,
// max: 30,
// maxVisible: 30,
// drawThreshold: 5,
// },
// customScalingFunction: function (min, max, total, value) {
// if (max === min) {
// return 0.5;
// } else {
// let scale = 1 / (max - min);
// return Math.max(0, (value - min) * scale);
// }
// },
// },
// // shadow: {
// // enabled: false,
// // color: "rgba(0,0,0,0.5)",
// // size: 10,
// // x: 5,
// // y: 5,
// // },
shape: "ellipse", //ellipse, circle, database, box, text
//image, circularImage, diamond, dot, star, triangle, triangleDown, hexagon, square和 icon
shapeProperties: {
borderDashes: false, // only for borders
borderRadius: 5, // only for box shape
interpolation: false, // only for image and circularImage shapes
useImageSize: false, // only for image and circularImage shapes
useBorderWithImage: false, // only for image shape
},
size: 20,
title: undefined,
value: undefined,
widthConstraint: false,
// x: undefined,
// y: undefined,
},
// 这里可以填写初始化配置 https://visjs.github.io/vis-network/docs/network/
edges: {
//关系线控制
3, //关系线宽度
arrows: {
//箭头
to: {
enabled: false, //箭头是否显示、开启
scaleFactor: 0.3, //箭头的大小
type: "arrow", //箭头的类型：circle,bar,arrow
},
},
// font: {
// size: 5,
// color: "green",
// align: "horizontal",
// },
length: 250, //关系线线长设置，数字较大最好以100位单位修改可看出差异
dashes: false, //关系线虚线，false不是，true是
arrowStrikethrough: true, //关系线与节点处无缝隙
color: {
color: "#005cc9", //关系线颜色设置
highlight: "red", //点击关系线时的颜色
},
},
};
关系图的数据结构
var data = {
nodes: [
{ id: "P000422", label: "EHMT2", link: "http://baidu.com" },
{ id: "P000001", label: "HIST1H1E", link: "http://baidu.com" },
],
edges: [
{ from: "P000001", to: "P000422" },
{ from: "P000422", to: "P000001" },
],
};
*edges是节点和节点之间的联系（线）
*nodes是节点的内容
*id的值要是唯一的！！！ ，link是我自己自定义的数据内容（用于点击后跳转页面用）
自定义事件
//这个是我自定义的事件点击节点跳转链接
var network = new vis.Network(container, data, options);
network.on("click", function (params) {
console.log(params.nodes);
if (params.nodes && params.nodes.length != 0) {
var idName = params.nodes[0];
// console.log(data);
if (data && data.nodes && data.nodes.length != 0) {
let length = data.nodes.length;
for (let i = 0; i < length; i++) {
if (data.nodes[i].id == idName) {
// console.log(data.nodes[i].link);
window.open(data.nodes[i].link);
return;
}
}
}
}
});
汇总
<script type="text/javascript">
window.onload = function () {
var container = document.getElementById("mynetwork");
var data = {
nodes: [
{ id: "P000422", label: "EHMT2", link: "http://baidu.com" },
{ id: "P000001", label: "HIST1H1E", link: "http://baidu.com" },
],
edges: [
{ from: "P000001", to: "P000422" },
{ from: "P000422", to: "P000001" },
],
};
var options = {
nodes: {
borderWidth: 1,
borderWidthSelected: 1,
brokenImage: undefined,
chosen: true, //对选择及悬停做出反应
color: {
border: "#005cc9",
background: "#97C2FC",
highlight: {
border: "#005cc9",
background: "#97C2FC",
},
hover: {
border: "#005cc9",
background: "#97C2FC",
},
},
opacity: 1,
// fixed: {
// x: false,
// y: false,
// },
font: {
color: "#ffffff", //颜色
size: 16, // px
face: "arial", //字体 宋体
background: "none",
strokeWidth: 0, // px
strokeColor: "#ffffff",
align: "center",
multi: false,
vadjust: 0,
// bold: {
// color: "#343434",
// size: 14, // px
// face: "arial",
// vadjust: 0,
// mod: "bold",
// },
// ital: {
// color: "#343434",
// size: 14, // px
// face: "arial",
// vadjust: 0,
// mod: "italic",
// },
// boldital: {
// color: "#343434",
// size: 14, // px
// face: "arial",
// vadjust: 0,
// mod: "bold italic",
// },
// mono: {
// color: "#343434",
// size: 15, // px
// face: "courier new",
// vadjust: 2,
// mod: "",
// },
},
// group: undefined,
// heightConstraint: false,
// hidden: false,
// icon: {
// face: "FontAwesome",
// code: undefined,
// weight: undefined,
// size: 50, //50,
// color: "#2B7CE9",
// },
// image: undefined,
// imagePadding: {
// left: 0,
// top: 0,
// bottom: 0,
// right: 0,
// },
// label: undefined,
// labelHighlightBold: true,
// level: undefined,
// mass: 1,
// physics: true,
// scaling: {
// min: 10,
// max: 30,
// label: {
// enabled: false,
// min: 14,
// max: 30,
// maxVisible: 30,
// drawThreshold: 5,
// },
// customScalingFunction: function (min, max, total, value) {
// if (max === min) {
// return 0.5;
// } else {
// let scale = 1 / (max - min);
// return Math.max(0, (value - min) * scale);
// }
// },
// },
// // shadow: {
// // enabled: false,
// // color: "rgba(0,0,0,0.5)",
// // size: 10,
// // x: 5,
// // y: 5,
// // },
shape: "ellipse", //ellipse, circle, database, box, text
//image, circularImage, diamond, dot, star, triangle, triangleDown, hexagon, square和 icon
shapeProperties: {
borderDashes: false, // only for borders
borderRadius: 5, // only for box shape
interpolation: false, // only for image and circularImage shapes
useImageSize: false, // only for image and circularImage shapes
useBorderWithImage: false, // only for image shape
},
size: 20,
title: undefined,
value: undefined,
widthConstraint: false,
// x: undefined,
// y: undefined,
},
// 这里可以填写初始化配置 https://visjs.github.io/vis-network/docs/network/
edges: {
//关系线控制
3, //关系线宽度
arrows: {
//箭头
to: {
enabled: false, //箭头是否显示、开启
scaleFactor: 0.3, //箭头的大小
type: "arrow", //箭头的类型：circle,bar,arrow
},
},
// font: {
// size: 5,
// color: "green",
// align: "horizontal",
// },
length: 250, //关系线线长设置，数字较大最好以100位单位修改可看出差异
dashes: false, //关系线虚线，false不是，true是
arrowStrikethrough: true, //关系线与节点处无缝隙
color: {
color: "#005cc9", //关系线颜色设置
highlight: "red", //点击关系线时的颜色
},
},
};
var network = new vis.Network(container, data, options);
network.on("click", function (params) {
console.log(params.nodes);
if (params.nodes && params.nodes.length != 0) {
var idName = params.nodes[0];
// console.log(data);
if (data && data.nodes && data.nodes.length != 0) {
let length = data.nodes.length;
for (let i = 0; i < length; i++) {
if (data.nodes[i].id == idName) {
// console.log(data.nodes[i].link);
window.open(data.nodes[i].link);
return;
}
}
}
}
});
};
</script>
中文文档：https://ame.cool/pages/f08230/
npm:https://www.npmjs.com/package/vis-network
官网链接：https://visjs.org/