|
|
| 4번째 줄: |
4번째 줄: |
| | | | |
| | ==만들어진txt파일을 복사하여 붙여넣기하면 이렇게 됩니다== | | ==만들어진txt파일을 복사하여 붙여넣기하면 이렇게 됩니다== |
| − | <html>
| |
| − | <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 += '<p><a href="' + refurl + '"><img height="100" src="' + image + '"><br/>' + nodeName + '</a></p>';
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − |
| |
| − | <h1 style="text-align: center;">광산김씨 족보</h1>
| |
| − | <h2 style="text-align: center;">오천가 김효로 중심의 인물들</h2>
| |
| − |
| |
| − | <table>
| |
| − | <tr height="440"><td><div id="mynetwork"></div></td></tr>
| |
| − | <tr height="160"><td><div id="info"></div></td></tr>
| |
| − | </table>
| |
| − |
| |
| − | </body>
| |
| − | </html>
| |
