g6/demos/gallery-code-tree.html
2018-06-14 15:34:37 +08:00

57 lines
1.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>
<p>创意来源https://www.rosettacode.org/wiki/Fractal_tree#JavaScript</p>
<script src="../build/g6.js"></script>
<script>
const getTreeData = (x1, y1, angle, depth, nodes = [], edges = []) => {
const deg_to_rad = Math.PI / 180;
if (depth !== 0){
const x2 = x1 + (Math.cos(angle * deg_to_rad) * depth * 10.0);
const y2 = y1 + (Math.sin(angle * deg_to_rad) * depth * 10.0);
const id1 = G6.Util.guid();
const id2 = G6.Util.guid();
nodes.push({
id: id1,
x: x1,
y: y1
});
nodes.push({
id: id2,
x: x2,
y: y2
});
edges.push({
source: id1,
target: id2
});
getTreeData(x2, y2, angle - 30, depth - 1, nodes, edges);
getTreeData(x2, y2, angle + 30, depth - 1, nodes, edges);
}
return {
nodes,
edges,
}
};
const data = getTreeData(0, 0, -90, 9);
const graph = new G6.Graph({
container: 'mountNode',
fitView: 'autoZoom',
height: window.innerHeight
});
graph.node({
size: 2
});
graph.read(data);
</script>
</body>
</html>