99901임태형
jongchon
설명
- 이 페이지까지 들어왔으면 거의 다 됐습니다.
- 일단 자신의 주소에 들어가면 바로 편집페이지가 나올텐데, 당황하지 말고 파일올리기를 통해 올라간 Html 주소를 링크시킵니다.
만들어진txt파일을 복사하여 붙여넣기하면 이렇게 됩니다
<head>
<title>Simple Ontology Visualization</title>
<style>
body {font: 10pt 함초롬바탕;}
p {font: 12pt 맑은 고딕; text-align: center;}
table {border: 0; width: 100%;}
tr:nth-child(even){background-color: #efefef;}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="../network/network.js"></script>
<script type="text/javascript">
var nodesTable = null;
var linksTable = null;
var network = null;
google.load('visualization', '1');
google.setOnLoadCallback(draw);
function draw() {
nodesTable = new google.visualization.DataTable();
nodesTable.addColumn('string', 'id');
nodesTable.addColumn('string', 'group');
nodesTable.addColumn('string', 'text');
nodesTable.addColumn('string', 'title');
nodesTable.addColumn('string', 'style');
nodesTable.addColumn('string', 'image');
nodesTable.addColumn('string', 'url');
nodesTable.addRow(['00000', 'dummy', , , , , ]);
nodesTable.addRow(['10005', '남자_image', '김효지', '<a href="http://kadhlab102.com" target="_blank">김효지</a>', 'image', 'man.gif', 'http://kadhlab102.com']);
nodesTable.addRow(['10006', '남자', '김회', '<a href="http://kadhlab102.com" target="_blank"><img src="man.gif"/></a>', , 'man.gif', 'http://kadhlab102.com']);
nodesTable.addRow(['10010', '남자', '김효로', '<a href="http://kadhlab102.com" target="_blank"><img src="man.gif"/></a>', , 'man.gif', 'http://kadhlab102.com']);
nodesTable.addRow(['10011', '남자', '김연', '<a href="http://kadhlab102.com" target="_blank">김연</a>', , 'http://digerati.aks.ac.kr/VR/style/noimage.png', 'http://kadhlab102.com']);
nodesTable.addRow(['10012', '남자', '김수', '김수', , 'http://digerati.aks.ac.kr/VR/style/noimage.png', ]);
nodesTable.addRow(['50063', '사위', '김우', '<a href="http://kadhlab102.com" target="_blank"><img src="sonInLaw.gif"/></a>', , 'sonInLaw.gif', 'http://kadhlab102.com']);
nodesTable.addRow(['50064', '사위', '금재', '<a href="http://kadhlab102.com" target="_blank"><img src="sonInLaw.gif"/></a>', , 'sonInLaw.gif', 'http://kadhlab102.com']);
nodesTable.addRow(['20037', '부인_image', '김효로 처 이씨', '<a href="http://kadhlab102.com" target="_blank">김효로_처_이씨</a>', 'image', 'wife.gif', 'http://kadhlab102.com']);
nodesTable.addRow(['20039', '부인_image', '김연 처 조씨', '<a href="http://kadhlab102.com" target="_blank">김연_처_조씨</a>', 'image', 'wife.gif', 'http://kadhlab102.com']);
nodesTable.addRow(['20040', '부인_image', '김수 처 김씨', '<a href="http://kadhlab102.com" target="_blank">김수_처_김씨</a>', 'image', 'wife.gif', 'http://kadhlab102.com']);
nodesTable.addRow(['40049', '딸', '김효로 1녀', '<a href="http://kadhlab102.com" target="_blank"><img src="daughter.gif"/></a>', , 'daughter.gif', 'http://kadhlab102.com']);
nodesTable.addRow(['40050', '딸', '김효로 2녀', '<a href="http://kadhlab102.com" target="_blank"><img src="daughter.gif"/></a>', , 'daughter.gif', 'http://kadhlab102.com']);
linksTable = new google.visualization.DataTable();
linksTable.addColumn('string', 'from');
linksTable.addColumn('string', 'to');
linksTable.addColumn('string', 'color');
linksTable.addColumn('string', 'style');
linksTable.addColumn('string', 'title');
linksTable.addRow(['10005', '10010', 'cyan', 'arrow', 'hasSuccessor']);
linksTable.addRow(['10006', '10010', 'navy', 'arrow', 'hasSon']);
linksTable.addRow(['10010', '10011', 'navy', 'arrow', 'hasSon']);
linksTable.addRow(['10010', '10012', 'navy', 'arrow', 'hasSon']);
linksTable.addRow(['10010', '20037', 'pink', 'arrow', 'hasWife']);
linksTable.addRow(['10011', '20039', 'pink', 'arrow', 'hasWife']);
linksTable.addRow(['10012', '20040', 'pink', 'arrow', 'hasWife']);
linksTable.addRow(['10010', '40049', 'brown', 'arrow', 'hasDaughter']);
linksTable.addRow(['10010', '40050', 'brown', 'arrow', 'hasDaughter']);
linksTable.addRow(['50063', '40049', 'pink', 'arrow', 'hasWife']);
linksTable.addRow(['50064', '40050', 'pink', 'arrow', 'hasWife']);
var options = {
'width': '100', 'height': '440px', 'stabilize': false, 'selectable': true,
'links': { 'length': 150, 'width': 1, },
'nodes': { 'fontFace': '함초롬바탕', 'fontSize': 15, 'backgroundColor': 'white', 'highlightColor': 'gold', 'fontColor': 'black', },
'groups': {
'남자': { 'borderColor': 'red', 'style': 'rect', 'radius': 15 },
'부인': { 'borderColor': 'blue', 'style': 'circle', 'radius': 15 },
'딸': { 'borderColor': 'green', 'style': 'rect', 'radius': 15 },
'사위': { 'borderColor': 'purple', 'style': 'rect', 'radius': 15 },
'dummy': { 'borderColor': 'white', 'style': 'dot', 'radius': 1 },
},
};
network = new links.Network(document.getElementById('mynetwork'));
network.draw(nodesTable, linksTable, options);
network = new links.Network(document.getElementById('mynetwork'));
google.visualization.events.addListener(network, 'select', onselect);
network.draw(nodesTable, linksTable, options);
var selection = [{'row': 0}];
network.setSelection(selection);
}
function onselect() {
var sel = network.getSelection();
var nodeName = nodesTable.getValue(sel[0].row, 2);
var image = nodesTable.getValue(sel[0].row, 5);
var refurl = nodesTable.getValue(sel[0].row, 6);
document.getElementById('info').innerHTML = ;
document.getElementById('info').innerHTML += '<a href="' + refurl + '"><img height="100" src="' + image + '">
' + nodeName + '</a>
}
</script>
</head>
