Last active
December 22, 2016 08:13
-
-
Save codefactory/4631415 to your computer and use it in GitHub Desktop.
Springy (http://getspringy.com/) 로 HTML5의 구성 요소들입니다. [데모보기] http://codefactory.kr/demos/graphs/html5_springy.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>HTML5 Features</title> | |
<style> | |
html, body { | |
height: 100%; | |
} | |
</style> | |
</head> | |
<body> | |
<canvas id="html5-features"></canvas> | |
<script src="jquery-1.9.0.min.js"></script> | |
<script src="../springy/springy.js"></script> <!-- http://getspringy.com/ --> | |
<script src="../springy/springyui.js"></script> <!-- http://getspringy.com/ --> | |
<script> | |
// 페이지 로드 후 canvas의 크기를 화면에 꽉차도록 조절 | |
$('#html5-features').attr({ | |
width: document.body.clientWidth, | |
height: document.body.clientHeight | |
}); | |
var graph = new Graph(), | |
colors = ['#00A0B0', '#6A4A3C', '#CC333F', '#EB6841', '#EDC951', '#7DBE3C', '#00A0B0', '#6A4A3C', '#CC333F', '#EB6841'], | |
colorsLen = colors.length, | |
i, j, k, len, | |
depth1, depth2, depth3; | |
$.getJSON('data/html5.json', function (data) { // http://codefactory.kr/demos/graphs/data/html5.json | |
// 아래의 코드에서 newNode를 만들 때 depth 속성은 Springy 라이브러리에서 원래 제공하는 속성이 아니라 제가 사용하려고 임의로 넣은 것입니다. | |
for (i in data) { | |
depth1 = graph.newNode({label: i, depth: 1}); // depth1 node | |
for (j in data[i]) { | |
depth2 = graph.newNode({label: j, depth: 2}); // depth2 node | |
graph.newEdge(depth1, depth2); // depth1과 depth2 연결 | |
len = data[i][j].length; | |
for (k = 0; k < len; k++) { | |
depth3 = graph.newNode({label: data[i][j][k], depth: 3}); // depth3 node | |
graph.newEdge(depth2, depth3, {color: colors[k % colorsLen]}); // depth2와 depth3 연결, 예쁘게 하려고 색상 넣음 | |
} | |
} | |
} | |
// springy 만듬 | |
var springy = $('#html5-features').springy({ | |
graph: graph, | |
nodeSelected: function(node){ | |
var url = 'https://www.google.com/#q=' + encodeURIComponent('html5 ' + node.data.label); | |
// depth가 3인 경우 구글 검색 결과를 새 창으로 띄움 | |
if (node.data.depth == 3) { | |
window.open(url); | |
} | |
} | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment