test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-05 05:09:07 +08:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

simplify graph

Browse Source
This commit is contained in:
shiwu.wyy 2019-08-08 19:33:56 +08:00
parent 350fffac69
commit 77fe77a6c6
3 changed files with 112 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demos/assets/data/filtered-trade.json Normal file
View File

File diff suppressed because one or more lines are too long

109
demos/simplify.html Normal file
View File

@ -0,0 +1,109 @@
<!DOCTYPE html></script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body{
background: rgb(255, 255, 255);
}
.g6-tooltip {
border: 1px solid #e2e2e2;
border-radius: 4px;
font-size: 12px;
color: #545454;
background-color: rgba(255, 255, 255, 0.9);
padding: 10px 8px;
box-shadow: rgb(174, 174, 174) 0px 0px 10px;
}
</style>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script src="./assets/d3-4.13.0.min.js"></script>
<script src="../build/fruchterman.js"></script>
<script src="../build/force.js"></script>
<script src="../build/circular.js"></script>
<script src="../build/bundling.js"></script>
<script>
const colors = [ '#f5222d', '#fa541c', '#fa8c16', '#faad14',
'#a0d911', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96' ];
const llightBlue16 = '#C8FDFC';
const llightOrange16 = '#FFAA86';
d3.json("./assets/data/filtered-trade.json", function(data) {
const nodes = data.nodes;
const edges = data.edges;
const circularLayout = new Circular({
center: [ 500, 300 ],
radius: 300,
ordering: 'degree'
});
const edgeBundling = new Bundling({
bundleThreshold: 0.6,
K: 100
});
// const fruchtermanLayout = new Fruchterman({
// maxIteration: 8000,
// center: [500, 300]
// });
const forceLayout = new Force({
center: [0, 0],
tick() {
graph.refreshPositions();
},
});
const graph = new G6.Graph({
container: 'mountNode',
width: 1000,
height: 800,
plugins: [ circularLayout, edgeBundling],
fitView: true,
defaultNode: {
shape: 'circle',
size: 10,
color: 'steelblue',
fill: 'steelblue'
},
nodeStyle: {
default: {
lineWidth: 0,
fill: 'steelblue'
}
},
edgeStyle: {
default: {
lineWidth: 1,
strokeOpacity: 1,
stroke: 'l(0) 0:' + llightOrange16 + ' 1:' + llightBlue16
}
},
modes: {
default: [ 'drag-node', {
type: 'tooltip',
formatText(model) {
const text = model.name + '\r Region: ' + model.region;
return text;
},
shouldUpdate: e => {
return true;
}
}]
},
});
// fruchtermanLayout.layout(data);
graph.data(data);
circularLayout.layout(data);
graph.render();
// forceLayout.layout(data);
setTimeout(() => {
edgeBundling.bundling(data);
}, 1000);
});
</script>
</body>
</html>

5
plugins/bundling/index.js
View File

@ -87,6 +87,7 @@ class Bundling extends Base {
for (let j = 0; j < iterations; j++) {
const forces = [];
edges.forEach((e, k) => {
if (e.source === e.target) return;
const source = nodeIdMap.get(e.source);
const target = nodeIdMap.get(e.target);
forces[k] = self.getEdgeForces({ source, target }, k, divisions, lambda);
@ -106,6 +107,7 @@ class Bundling extends Base {
// change the edges according to edgePoints
edges.forEach((e, i) => {
if (e.source === e.target) return;
e.shape = 'polyline';
e.controlPoints = edgePoints[i].slice(1, edgePoints[i].length - 1);
});
@ -159,9 +161,7 @@ class Bundling extends Base {
edgePoints[i].forEach((ep, j) => {
if (j === 0) return;
let oriDivisionLength = getEucliDis(ep, edgePoints[i][j - 1]);
// let count = 0;
while (oriDivisionLength > currentDivisonLength) {
// count++;
const ratio = currentDivisonLength / oriDivisionLength;
const edgePoint = { x: edgePoints[i][j - 1].x, y: edgePoints[i][j - 1].y };
edgePoint.x += ratio * (ep.x - edgePoints[i][j - 1].x);
@ -170,7 +170,6 @@ class Bundling extends Base {
oriDivisionLength -= currentDivisonLength;
currentDivisonLength = divisionLength;
}
// console.log('push count', count, divisions);
currentDivisonLength -= oriDivisionLength;
});
newEdgePoints.push({ x: target.x, y: target.y }); // target