https://antv-2018.alipay.com/zh-cn/g6/3.x/demo/tool/edge-bundling.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Edge Bundling 边绑定</title>
<style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/bundling.js"></script>
<script>
/**
* 该示例演示在环形布局中使用边绑定插件
* by 十吾
*/
var descriptionDiv = document.createElement("div");
descriptionDiv.innerHTML = '1 秒后绑定边。';
var graphDiv = document.getElementById("mountNode");
document.body.insertBefore(descriptionDiv, graphDiv);
var data = {
"nodes": [{
"id": "0",
"label": "0"
}, {
"id": "1",
"label": "1"
}, {
"id": "2",
"label": "2"
}, {
"id": "3",
"label": "3"
}, {
"id": "4",
"label": "4"
}, {
"id": "5",
"label": "5"
}, {
"id": "6",
"label": "6"
}, {
"id": "7",
"label": "7"
}, {
"id": "8",
"label": "8"
}, {
"id": "9",
"label": "9"
}, {
"id": "10",
"label": "10"
}, {
"id": "11",
"label": "11"
}, {
"id": "12",
"label": "12"
}, {
"id": "13",
"label": "13"
}, {
"id": "14",
"label": "14"
}, {
"id": "15",
"label": "15"
}, {
"id": "16",
"label": "16"
}, {
"id": "17",
"label": "17"
}, {
"id": "18",
"label": "18"
}, {
"id": "19",
"label": "19"
}, {
"id": "20",
"label": "20"
}, {
"id": "21",
"label": "21"
}, {
"id": "22",
"label": "22"
}, {
"id": "23",
"label": "23"
}, {
"id": "24",
"label": "24"
}, {
"id": "25",
"label": "25"
}, {
"id": "26",
"label": "26"
}, {
"id": "27",
"label": "27"
}, {
"id": "28",
"label": "28"
}, {
"id": "29",
"label": "29"
}, {
"id": "30",
"label": "30"
}, {
"id": "31",
"label": "31"
}, {
"id": "32",
"label": "32"
}, {
"id": "33",
"label": "33"
}],
"edges": [{
"source": "0",
"target": "1"
}, {
"source": "0",
"target": "2"
}, {
"source": "0",
"target": "3"
}, {
"source": "0",
"target": "4"
}, {
"source": "0",
"target": "5"
}, {
"source": "0",
"target": "7"
}, {
"source": "0",
"target": "8"
}, {
"source": "0",
"target": "9"
}, {
"source": "0",
"target": "10"
}, {
"source": "0",
"target": "11"
}, {
"source": "0",
"target": "13"
}, {
"source": "0",
"target": "14"
}, {
"source": "0",
"target": "15"
}, {
"source": "0",
"target": "16"
}, {
"source": "2",
"target": "3"
}, {
"source": "4",
"target": "5"
}, {
"source": "4",
"target": "6"
}, {
"source": "5",
"target": "6"
}, {
"source": "7",
"target": "13"
}, {
"source": "8",
"target": "14"
}, {
"source": "9",
"target": "10"
}, {
"source": "10",
"target": "22"
}, {
"source": "10",
"target": "14"
}, {
"source": "10",
"target": "12"
}, {
"source": "10",
"target": "24"
}, {
"source": "10",
"target": "21"
}, {
"source": "10",
"target": "20"
}, {
"source": "11",
"target": "24"
}, {
"source": "11",
"target": "22"
}, {
"source": "11",
"target": "14"
}, {
"source": "12",
"target": "13"
}, {
"source": "16",
"target": "17"
}, {
"source": "16",
"target": "18"
}, {
"source": "16",
"target": "21"
}, {
"source": "16",
"target": "22"
}, {
"source": "17",
"target": "18"
}, {
"source": "17",
"target": "20"
}, {
"source": "18",
"target": "19"
}, {
"source": "19",
"target": "20"
}, {
"source": "19",
"target": "33"
}, {
"source": "19",
"target": "22"
}, {
"source": "19",
"target": "23"
}, {
"source": "20",
"target": "21"
}, {
"source": "21",
"target": "22"
}, {
"source": "22",
"target": "24"
}, {
"source": "22",
"target": "25"
}, {
"source": "22",
"target": "26"
}, {
"source": "22",
"target": "23"
}, {
"source": "22",
"target": "28"
}, {
"source": "22",
"target": "30"
}, {
"source": "22",
"target": "31"
}, {
"source": "22",
"target": "32"
}, {
"source": "22",
"target": "33"
}, {
"source": "23",
"target": "28"
}, {
"source": "23",
"target": "27"
}, {
"source": "23",
"target": "29"
}, {
"source": "23",
"target": "30"
}, {
"source": "23",
"target": "31"
}, {
"source": "23",
"target": "33"
}, {
"source": "32",
"target": "33"
}]
};
var edgeBundling = new Bundling({
bundleThreshold: 0.1
});
var radius = window.innerWidth < window.innerHeight ? 0.7 * window.innerWidth / 2 : 0.7 * window.innerHeight / 2;
var graph = new G6.Graph({
container: 'mountNode',
width: window.innerWidth,
height: window.innerHeight,
layout: {
type: 'circular',
ordering: null,
radius: radius
},
plugins: [edgeBundling],
defaultNode: {
size: [20, 20],
color: 'steelblue'
},
defaultEdge: {
size: 1,
color: '#999'
}
});
graph.data(data);
graph.render();
setTimeout(function() {
edgeBundling.bundling(data);
descriptionDiv.innerHTML = '边绑定完成！';
}, 1000);
</script></body>
</html>
文档更新时间: 2024-04-05 16:11 作者：admin
