Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Springy (http://getspringy.com/) 로 HTML5의 구성 요소들입니다. [데모보기] http://codefactory.kr/demos/graphs/html5_springy.html
<!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