g6/demos/layout-simple.html
2018-07-12 21:38:24 +08:00

44 lines
1.1 KiB
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>布局-简单使用</title>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script src="../build/plugin.util.randomData.js"></script>
<script>
const Util = G6.Util;
const data = Util.createChainData(50);
const width = window.innerWidth;
const height = window.innerHeight;
const graph = new G6.Graph({
container: 'mountNode',
width,
height,
layout(nodes) {
const col = 5;
const hgap = 76;
const vgap = 50;
nodes.forEach((node, index) => {
if (parseInt(index / col) % 2 === 0) {
node.x = (col - index % col) * hgap;
} else {
node.x = index % col * hgap + hgap;
}
node.y = parseInt(index / col) * vgap + vgap / 2;
});
}
});
graph.read(data);
</script>
</body>
</html>