2021-04-10

最新推荐文章于 2024-07-25 11:26:35 发布

qq_42125663

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量70

点赞数

分类专栏：关系网文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_42125663/article/details/115566110

版权

关系网专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关系网状图，copy的网上大佬的。做个笔记。

原文：https://segmentfault.com/a/1190000015214364

效果是这样的，牛批。

目录结构是：

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#cy {
width: 100%;
height:100%;
position: absolute;
left: 0;
top:0;
}
</style>
</head>

<body>
<div id="cy"></div>
<script src="./jquery.min.js"></script>
<script src="./main.js"></script>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: true,
autounselectify: true,
motionBlur:!1,
maxZoom:2.5,
minZoom:.4,
wheelSensitivity:.1,//滑动滚轮一次缩放大小
textureOnViewport:!1,
style: [{
selector: 'node',
style: {
"content": function (ele) {
return ele.data('label') || ele.data('id')
},
"text-valign": 'center',
"width": function (a) {
return "Company" == a.data('type') ? 60 : 45
},
"height": function (a) {
return "Company" == a.data('type') ? 60 : 45
},
"background-color": function (a) {
return !a.data('target') ? '#47D2AC' : "Company" == a.data('type') ?
'#2196F4' : '#EAA829'
},
"color": '#fff',
"border-color": function (a) {
return !a.data('target') ? '#47D2AC' : "Company" == a.data('type') ?
'#2196F4' : '#EAA829'
},
"border-width": 1,
"text-wrap": "wrap",
"font-size": 10,
"font-family": "microsoft yahei",
"overlay-color": "#fff",
"overlay-opacity": 0,
"background-opacity": 1,
"shape": "ellipse",
"z-index-compare": "manual",
"z-index": 20,
"padding": function (a) {
return "Company" == a.data("type") ? 3 : 0
},
"text-max-width": 60,
"text-margin-y": function (a) {
return "Company" == a.data("type") ? 4 : 2
},
"label": function (a) {
a = a.data("id");
var b = a.length;
return 5 >= b ? a : 5 <= b && 9 >= b ? a.substring(0, b - 5) + "\n" + a.substring(
b - 5, b) : 9 <= b && 13 >= b ? a.substring(0, 4) + "\n" + a.substring(
4, 9) + "\n" + a.substring(9, 13) : a.substring(0, 4) + "\n" + a.substring(
4, 9) + "\n" + a.substring(9, 12) + ".."
},
}
},
{
selector: 'edge',
style: {
// 添加箭头
"line-style": function (a) {
return "solid"
},
"curve-style": "bezier",
"control-point-step-size": 20,
"target-arrow-shape": "triangle",
"target-arrow-color": function (a) {
// return a.data("color")
return '#DCDCDC'
},
"arrow-scale": .5,
"line-color": function (a) {
// return a.data("color")
return '#DCDCDC'
},
"label": function (a) {
return a.data("label")
},
"text-opacity": .8,
"font-size": 10,
"background-color": function (a) {
return "#333"
},
"width": 1,
"overlay-color": "#fff",
"overlay-opacity": 0,
"font-family": "microsoft yahei"
}
},
{
selector: ':selected',
style: {
"border-width": 3,
"border-color": '#333',
"background-color": 'black',
"line-color": 'black',
"target-arrow-color": 'black',
"source-arrow-color": 'black'
}
},
{
selector: ".nodeHover", //节点变暗，有悬停效果
style: {
"shape": "ellipse",
"background-opacity": .8
}
},
{
selector: ".nodeActive",
style: {
"border-color": '#4EA2F0',
"border-width": 10,
"border-opacity": .5
}
},
{
selector: ".edgeShow",
style: {
"color": "#999",
"text-opacity": 1,
"font-weight": 400,
"label": function (a) {
return a.data("label")
},
"font-size": 10,
"arrow-scale": .8,
"width": 1.5,
"source-text-margin-y": 20,
"target-text-margin-y": 20,
},
},
{
selector: ".edgeActive",
style: {
"arrow-scale": .8,
"width": 1.5,
"color": "#330",
"text-opacity": 1,
"font-size": 10,
"text-background-color": "#fff",
"text-background-opacity": .8,
"text-background-padding": 0,
"source-text-margin-y": 20,
"target-text-margin-y": 20,
"z-index-compare": "manual",
"z-index": 1,
"line-color": function (a) { //直线颜色
return "#4EA2F0"
},
"target-arrow-color": function (a) { //箭头颜色
return "#4EA2F0"
},
label: function (a) {
return a.data("label")
}
}
},
{
selector: ".dull",
style: {
"z-index": 1,
"opacity": .2
}
}
],
elements: {
nodes:[
{data:{id:'王大拿',target:true,type:'People'}},
{data:{id:'BBB公司',target:false,type:'Company'}},
{data:{id:'CCC公司',target:false,type:'Company'}},
{data:{id:'DDD公司',target:false,type:'Company'}},
{data:{id:'EEE公司',target:false,type:'Company'}},
{data:{id:'FFF公司',target:false,type:'Company'}},
{data:{id:'GGG公司',target:false,type:'Company'}},
{data:{id:'GGG_1公司',target:false,type:'Company'}},
{data:{id:'GGG_2公司',target:false,type:'Company'}},
{data:{id:'GGG_3公司',target:false,type:'Company'}},
{data:{id:'HHH公司',target:false,type:'Company'}},
{data:{id:'III公司',target:false,type:'Company'}},
{data:{id:'JJJ公司',target:false,type:'Company'}},
{data:{id:'KKK公司',target:false,type:'Company'}},
{data:{id:'LLL公司',target:false,type:'Company'}},
{data:{id:'MMM公司',target:false,type:'Company'}},
{data:{id:'NNN公司',target:false,type:'Company'}},
{data:{id:'OOO公司',target:false,type:'Company'}},
{data:{id:'PPP公司',target:false,type:'Company'}},
{data:{id:'QQQ公司',target:false,type:'Company'}},
{data:{id:'RRR公司',target:false,type:'Company'}},
{data:{id:'SSS公司',target:false,type:'Company'}},
{data:{id:'TTT公司',target:false,type:'Company'}},
{data:{id:'AAA公司',target:true,type:'Company'}},
],
edges:[
{data:{source:'王大拿',target:'AAA公司',label:'董事'}},
{data:{source:'王大拿',target:'BBB公司',label:'投资'}},
{data:{source:'王大拿',target:'CCC公司',label:'董事'}},
{data:{source:'王大拿',target:'DDD公司',label:'投资'}},
{data:{source:'王大拿',target:'EEE公司',label:'董事'}},
{data:{source:'王大拿',target:'HHH公司',label:'董事'}},
{data:{source:'王大拿',target:'III公司',label:'董事'}},
{data:{source:'王大拿',target:'JJJ公司',label:'董事'}},
{data:{source:'王大拿',target:'KKK公司',label:'董事'}},
{data:{source:'GGG_1公司',target:'KKK公司',label:'董事'}},
{data:{source:'GGG_2公司',target:'LLL公司',label:'董事'}},
{data:{source:'GGG_2公司',target:'MMM公司',label:'董事'}},
{data:{source:'GGG_3公司',target:'NNN公司',label:'董事'}},
{data:{source:'NNN公司',target:'OOO公司',label:'董事'}},
{data:{source:'OOO公司',target:'PPP公司',label:'董事'}},
{data:{source:'PPP公司',target:'QQQ公司',label:'董事'}},
{data:{source:'QQQ公司',target:'RRR公司',label:'董事'}},
{data:{source:'RRR公司',target:'SSS公司',label:'董事'}},
{data:{source:'SSS公司',target:'TTT公司',label:'董事'}},
{data:{source:'EEE公司',target:'FFF公司',label:'投资'}},
{data:{source:'FFF公司',target:'GGG公司',label:'董事'}},
{data:{source:'GGG公司',target:'GGG_1公司',label:'投资'}},
{data:{source:'GGG公司',target:'GGG_2公司',label:'董事'}},
{data:{source:'GGG公司',target:'GGG_3公司',label:'董事'}},
]
},
layout: {
name: 'cose',//用哪种方式排列，可选：breadthfirst(广度优先)、cose(缝制，乱交)、preset(预设)、circle(圆形)、grid(矩形)
idealEdgeLength: 60,
nodeOverlap: 20,
refresh: 20,
fit: true,
padding: 30,
randomize: false,
componentSpacing: 20,
nodeRepulsion: 400,
edgeElasticity: 10,
nestingFactor: 5,
animate:true,//出来动画
gravity: 80,
numIter: 1000,
initialTemp: 200,
coolingFactor: 0.95,
minTemp: 1.0
}
})
cy.collection("edge").addClass("edgeShow");
cy.on("mouseover", "node", function (a) {
$('#cy').css('cursor', 'move');
let c = a.target;
c.addClass("nodeHover");
// cy.collection("edge").removeClass("edgeShow");
cy.collection("edge").removeClass("edgeActive");
c.neighborhood("edge").addClass("edgeActive");
})
cy.on("mouseout", "node", function (a) {
$('#cy').css('cursor', 'default');
let c = a.target;
c.removeClass("nodeHover");
cy.collection("edge").removeClass("edgeActive");
})
cy.on("click", "node", function (a) {
let c = a.target;
c.removeClass("nodeActive");
cy.collection("edge").removeClass("edgeActive");
})
cy.on("vmousedown", "node", function (a) { //监听鼠标左键按下
let c = a.target;
cy.collection("edge").addClass('dull');
cy.collection("node").addClass('dull');
c.removeClass("dull");
c.neighborhood("edge").removeClass("dull");
c.neighborhood("edge").addClass("edgeActive");
c.neighborhood("edge").connectedNodes().removeClass("dull"); //当前节点的邻域边的边缘节点！
// c.neighborhood("node").removeClass("dull");//与上面意义相同
})
cy.on("tapend", "node", function (a) { //监听鼠标左键释放
let c = a.target;
cy.collection("edge").removeClass('dull');
cy.collection("node").removeClass('dull');
c.neighborhood("edge").removeClass("edgeActive");
c.neighborhood("node").removeClass("nodeActive");
})

//线
cy.on("mouseover", "edge", function (a) {
let c = a.target;
cy.collection("edge").removeClass("edgeActive");
c.addClass("edgeActive")
})
cy.on("mouseout", "edge", function (a) {
let c = a.target;
c.removeClass("edgeActive")
})
</script>
</body>

</html>

qq_42125663

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-04-10

关系网状图，copy的网上大佬的。做个笔记。原文：https://segmentfault.com/a/1190000015214364效果是这样的，牛批。目录结构是：index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
复制链接

扫一扫

专栏目录