"99901임태형"의 두 판 사이의 차이

jongchon
이동: 둘러보기, 검색
(문서 내용을 "==설명== * 이 페이지까지 들어왔으면 거의 다 됐습니다. * 일단 자신의 주소에 들어가면 바로 편집페이지가 나올텐데, 당황..."으로 바꿈)
(→‎만들어진txt파일을 복사하여 붙여넣기하면 이렇게 됩니다)
4번째 줄: 4번째 줄:
  
 
==만들어진txt파일을 복사하여 붙여넣기하면 이렇게 됩니다==
 
==만들어진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 += '<p><a href="' + refurl + '"><img height="100" src="' + image + '"><br/>' + nodeName + '</a></p>';
 +
}
 +
 +
    </script>
 +
</head>

2017년 5월 22일 (월) 20:11 판

설명

  • 이 페이지까지 들어왔으면 거의 다 됐습니다.
  • 일단 자신의 주소에 들어가면 바로 편집페이지가 나올텐데, 당황하지 말고 파일올리기를 통해 올라간 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>

원본 주소 "http://dh.aks.ac.kr/~jongchon/wiki/index.php?title=99901임태형&oldid=21"