https://gwangju-storyplatform.com/wiki/index.php?action=history&feed=atom&title=%EC%9D%98%EB%AF%B8%EA%B4%80%EA%B3%84%EB%A7%9D
의미관계망 - 편집 역사
2026-04-05T10:54:23Z
이 문서의 편집 역사
MediaWiki 1.31.8
https://gwangju-storyplatform.com/wiki/index.php?title=%EC%9D%98%EB%AF%B8%EA%B4%80%EA%B3%84%EB%A7%9D&diff=59860&oldid=prev
Ec3admin: 새 문서: {{#tag:html| <script type="text/javascript" src="https://dh.aks.ac.kr/Graph/vis/dist/vis.js"></script> <style> #mynetwork { width: 90%; height: 70vh; background-color: #ffffff;...
2025-12-22T09:31:57Z
<p>새 문서: {{#tag:html| <script type="text/javascript" src="https://dh.aks.ac.kr/Graph/vis/dist/vis.js"></script> <style> #mynetwork { width: 90%; height: 70vh; background-color: #ffffff;...</p>
<p><b>새 문서</b></p><div>{{#tag:html|<br />
<script type="text/javascript" src="https://dh.aks.ac.kr/Graph/vis/dist/vis.js"></script><br />
<style><br />
#mynetwork {<br />
width: 90%;<br />
height: 70vh;<br />
background-color: #ffffff;<br />
border: 1px solid lightgray;<br />
margin: 0 auto;<br />
display: flex;<br />
justify-content: center;<br />
align-items: center;<br />
}<br />
#designGuide {<br />
width: 100%;<br />
margin-top: 60px;<br />
}<br />
#designGuide >h2{<br />
font-size:28px;<br />
font-weight:700;<br />
}<br />
#designGuide >h2 + p{<br />
font-size:16px;<br />
}<br />
.design-section {<br />
margin-top:40px;<br />
}<br />
.design-section h3 {<br />
font-size:20px;<br />
font-weight:bold;<br />
margin:0;<br />
}<br />
.design-section h3 + p{<br />
margin-top:8px;<br />
font-size:16px;<br />
margin-bottom:0;<br />
<br />
}<br />
.example-grid {<br />
display: grid;<br />
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));<br />
gap: 28px;<br />
margin-top: 24px;<br />
padding-top:22px;<br />
border-top:1px solid #eee;<br />
}<br />
.example-item {<br />
border: 1px solid #eee;<br />
border-radius: 12px;<br />
text-align: center;<br />
min-height:240px;<br />
padding:20px;<br />
display:flex;<br />
flex-direction: column;<br />
justify-content: center;<br />
align-items: center;<br />
}<br />
.example-item >div{<br />
width:100%;<br />
flex:1;<br />
max-height:240px;<br />
}<br />
.example-item h4 {<br />
font-size: 16px;<br />
margin-top: 0;<br />
margin-bottom: 12px;<br />
}<br />
.example-item pre {<br />
background-color: #f5f5f5;<br />
padding: 15px;<br />
border-radius: 6px;<br />
overflow-x: auto;<br />
text-align: left;<br />
font-size: 16px;<br />
margin-top: 15px;<br />
border: 1px solid #e0e0e0;<br />
line-height: 1.5;<br />
max-height: 300px;<br />
overflow-y: auto;<br />
}<br />
.color-box {<br />
width: 40px;<br />
height: 40px;<br />
border-radius: 4px;<br />
display: inline-block;<br />
margin-right: 10px;<br />
vertical-align: middle;<br />
}<br />
.edge-example {<br />
width: 100%;<br />
height: 80px;<br />
background-color: white;<br />
position: relative;<br />
margin-bottom: 15px;<br />
}<br />
.tab-container {<br />
display: flex;<br />
margin-top: 40px;<br />
background-color:#f9f9f9;<br />
border:1px solid #ddd;<br />
}<br />
.tab {<br />
flex:1;<br />
text-align:center;<br />
padding: 12px 0;<br />
cursor: pointer;<br />
border: 1px solid transparent;<br />
border-bottom: none;<br />
font-family: Pretendard;<br />
font-weight: 700;<br />
font-size: 16px;<br />
line-height: 26px;<br />
letter-spacing: 0%;<br />
}<br />
.tab + .tab{<br />
border-left:1px solid #eee;<br />
}<br />
.tab.active {<br />
background-color: #181818;<br />
color: #fff;<br />
}<br />
.tab-content {<br />
display: none;<br />
}<br />
.tab-content.active {<br />
display: block;<br />
}<br />
@media screen and (max-width: 991px) {<br />
#designGuide{<br />
margin-top:40px;<br />
}<br />
#designGuide >h2{<br />
font-size:20px;<br />
}<br />
.tab-container{<br />
flex-wrap:wrap;margin-top:24px;<br />
}<br />
.tab{<br />
flex:1 0 auto;<br />
width:50%;<br />
}<br />
.tab:nth-child(1n-2){<br />
border-bottom:1px solid #eee;<br />
}<br />
.design-section{<br />
margin-top:24px;<br />
}<br />
.design-section h3{<br />
margin-bottom:4px;<br />
}<br />
}<br />
</style><br />
<br />
<iframe width="100%" height="800px" src="https://dh.aks.ac.kr/~sandbox/cgi-bin/GuestQuery.py?db=gwangju&project=gwangju&key=우일선선교사사택"></iframe><br />
<br />
<div id="designGuide"><br />
<h2>vis.js 디자인 가이드</h2><br />
<p>이 가이드는 vis.js 라이브러리를 사용한 네트워크 그래프 디자인 옵션을 보여줍니다.</p><br />
<br />
<div class="tab-container"><br />
<div class="tab active" onclick="showTab('nodeShapes')">노드 모양</div><br />
<div class="tab" onclick="showTab('nodeStyles')">노드 스타일</div><br />
<div class="tab" onclick="showTab('edgeStyles')">엣지 스타일</div><br />
<div class="tab" onclick="showTab('layouts')">레이아웃</div><br />
</div><br />
<br />
<div id="nodeShapes" class="tab-content active"><br />
<div class="design-section"><br />
<h3>1. 노드 모양 (Shape)</h3><br />
<p>vis.js는 다양한 노드 모양을 제공합니다:</p><br />
<div class="example-grid" id="shapeExamples"><br />
<!-- 여기에 노드 모양 예시가 동적으로 추가됩니다 --><br />
</div><br />
</div><br />
</div><br />
<br />
<div id="nodeStyles" class="tab-content"><br />
<div class="design-section"><br />
<h3>2. 노드 스타일링</h3><br />
<p>노드의 색상, 테두리, 폰트 등을 커스터마이징할 수 있습니다:</p><br />
<div class="example-grid" id="styleExamples"><br />
<!-- 여기에 노드 스타일 예시가 동적으로 추가됩니다 --><br />
</div><br />
</div><br />
</div><br />
<br />
<div id="edgeStyles" class="tab-content"><br />
<div class="design-section"><br />
<h3>3. 엣지(간선) 스타일링</h3><br />
<p>엣지의 색상, 두께, 화살표 등을 설정할 수 있습니다:</p><br />
<div class="example-grid" id="edgeExamples"><br />
<!-- 여기에 엣지 스타일 예시가 동적으로 추가됩니다 --><br />
</div><br />
</div><br />
</div><br />
<br />
<div id="layouts" class="tab-content"><br />
<div class="design-section"><br />
<h3>4. 네트워크 레이아웃</h3><br />
<p>그래프의 전체 레이아웃과 물리 효과를 설정할 수 있습니다:</p><br />
<div class="example-grid" id="layoutExamples"><br />
<!-- 여기에 레이아웃 예시가 동적으로 추가됩니다 --><br />
</div><br />
</div><br />
</div><br />
</div><br />
<br />
<script><br />
// 디자인 가이드 예시 생성 함수<br />
function createDesignExamples() {<br />
// 1. 노드 모양 예시<br />
const shapeTypes = [<br />
{ shape: 'ellipse', label: 'ellipse' },<br />
{ shape: 'circle', label: 'circle' },<br />
{ shape: 'box', label: 'box' },<br />
{ shape: 'text', label: 'text' },<br />
{ shape: 'diamond', label: 'diamond' },<br />
{ shape: 'dot', label: 'dot' },<br />
{ shape: 'star', label: 'star' },<br />
{ shape: 'triangle', label: 'triangle' },<br />
{ shape: 'triangleDown', label: 'triangleDown' },<br />
{ shape: 'hexagon', label: 'hexagon' },<br />
{ shape: 'square', label: 'square' },<br />
{ shape: 'image', label: 'image', image: 'https://dh.aks.ac.kr/~gwangju/icon/photo/icon-Orchestra.jpg' },<br />
{ shape: 'circularImage', label: 'circularImage', image: 'https://dh.aks.ac.kr/~gwangju/icon/photo/icon-Orchestra.jpg' }<br />
];<br />
<br />
const shapeContainer = document.getElementById('shapeExamples');<br />
shapeTypes.forEach(shapeInfo => {<br />
const exampleItem = document.createElement('div');<br />
exampleItem.className = 'example-item';<br />
<br />
// 작은 네트워크 컨테이너 생성<br />
const networkContainer = document.createElement('div');<br />
networkContainer.style.margin = '0 auto';<br />
networkContainer.style.display = 'flex';<br />
networkContainer.style.justifyContent = 'center';<br />
networkContainer.style.alignItems = 'center';<br />
<br />
exampleItem.appendChild(networkContainer);<br />
shapeContainer.appendChild(exampleItem);<br />
<br />
// 노드 생성<br />
const nodes = new vis.DataSet([{<br />
id: 1,<br />
label: shapeInfo.label,<br />
shape: shapeInfo.shape,<br />
image: shapeInfo.image <br />
}]);<br />
<br />
// 네트워크 생성<br />
const network = new vis.Network(networkContainer, { nodes }, {<br />
nodes: {<br />
size: 40,<br />
font: { size: 14 }<br />
},<br />
physics: {<br />
enabled: true,<br />
stabilization: true,<br />
barnesHut: {<br />
gravitationalConstant: -2000,<br />
centralGravity: 0.1,<br />
springLength: 95,<br />
springConstant: 0.04,<br />
damping: 0.09<br />
}<br />
},<br />
interaction: {<br />
dragNodes: true,<br />
dragView: false,<br />
zoomView: false<br />
}<br />
});<br />
<br />
// 네트워크 캔버스 중앙 정렬<br />
network.on("afterDrawing", function(ctx) {<br />
network.fit();<br />
});<br />
<br />
});<br />
<br />
// 2. 노드 스타일 예시<br />
const nodeStyleExamples = [<br />
{<br />
name: '기본 스타일',<br />
options: {<br />
shape: 'circle',<br />
color: {<br />
background: '#97C2FC',<br />
border: '#2B7CE9'<br />
},<br />
borderWidth: 2<br />
}<br />
},<br />
{<br />
name: '아이콘 오버레이',<br />
customRender: true,<br />
options: {<br />
shape: 'circularImage',<br />
image: 'https://img.icons8.com/color/48/church.png',<br />
borderWidth: 3,<br />
borderWidthSelected: 5,<br />
color: {<br />
border: '#03A9F4',<br />
background: '#E1F5FE'<br />
},<br />
size: 40<br />
}<br />
},<br />
{<br />
name: '하이라이트 효과',<br />
options: {<br />
color: { <br />
background: '#97C2FC', <br />
border: '#2B7CE9',<br />
highlight: { background: '#D2E5FF', border: '#2B7CE9' }<br />
},<br />
size: 30<br />
}<br />
},<br />
{<br />
name: '그림자 효과',<br />
options: {<br />
color: { background: '#FFD86E', border: '#EDAA25' },<br />
shadow: { enabled: true, color: 'rgba(0,0,0,0.5)', size: 10, x: 5, y: 5 },<br />
size: 30<br />
}<br />
},<br />
{<br />
name: '검정 배경 흰색 글씨',<br />
options: {<br />
color: { background: 'black', border: '#333' },<br />
font: { color: 'white', size: 14 },<br />
size: 30<br />
}<br />
},<br />
{<br />
name: '둥근 이미지',<br />
options: {<br />
shape: 'circularImage',<br />
image: 'https://dh.aks.ac.kr/~gwangju/icon/photo/icon-Orchestra.jpg',<br />
size: 30<br />
}<br />
},<br />
{<br />
name: '커스텀 폰트',<br />
options: {<br />
font: { face: '함초롬바탕', color: '#772244', size: 16, bold: true },<br />
color: { background: '#FFECB3' },<br />
size: 30<br />
}<br />
}<br />
];<br />
<br />
const styleContainer = document.getElementById('styleExamples');<br />
nodeStyleExamples.forEach(example => {<br />
const exampleItem = document.createElement('div');<br />
exampleItem.className = 'example-item';<br />
<br />
// 제목 추가<br />
const title = document.createElement('h4');<br />
title.textContent = example.name;<br />
exampleItem.appendChild(title);<br />
<br />
<br />
// 작은 네트워크 컨테이너 생성<br />
const networkContainer = document.createElement('div');<br />
networkContainer.style.margin = '0 auto';<br />
networkContainer.style.display = 'flex';<br />
networkContainer.style.justifyContent = 'center';<br />
networkContainer.style.alignItems = 'center';<br />
networkContainer.style.position = 'relative';<br />
<br />
exampleItem.appendChild(networkContainer);<br />
<br />
styleContainer.appendChild(exampleItem);<br />
<br />
// 노드 생성<br />
const nodes = new vis.DataSet([{<br />
id: 1,<br />
label: '노드',<br />
...example.options<br />
}]);<br />
<br />
// 네트워크 생성<br />
const network = new vis.Network(networkContainer, { nodes }, {<br />
physics: {<br />
enabled: true,<br />
stabilization: true,<br />
barnesHut: {<br />
gravitationalConstant: -2000,<br />
centralGravity: 0.1,<br />
springLength: 95,<br />
springConstant: 0.04,<br />
damping: 0.09<br />
}<br />
},<br />
interaction: {<br />
dragNodes: true,<br />
dragView: false,<br />
zoomView: false<br />
}<br />
});<br />
// 네트워크 캔버스 중앙 정렬<br />
network.on("afterDrawing", function() {<br />
network.fit();<br />
});<br />
<br />
// 아이콘 오버레이를 위한 새로운 방식 적용<br />
if(example.customRender){<br />
if (example.name === '아이콘 오버레이' ) {<br />
// 노드 렌더링 함수 재정의<br />
const originalDrawFunction = network.body.nodes[1].shape.draw;<br />
network.body.nodes[1].shape.draw = function(ctx, x, y, selected, hover, values) {<br />
// 기본 노드 그리기<br />
originalDrawFunction.call(this, ctx, x, y, selected, hover, values);<br />
<br />
// 노드 크기 가져오기<br />
const radius = values.size;<br />
<br />
// + 아이콘 배경 그리기<br />
ctx.fillStyle = '#FF5722';<br />
ctx.beginPath();<br />
ctx.arc(x + radius*0.7, y - radius*0.7, radius*0.35, 0, 2 * Math.PI);<br />
ctx.fill();<br />
ctx.strokeStyle = 'white';<br />
ctx.lineWidth = 2;<br />
ctx.stroke();<br />
<br />
// 플러스 기호 그리기 - 더 굵고 큰 선으로 그리기<br />
const iconX = x + radius*0.7;<br />
const iconY = y - radius*0.7;<br />
const iconSize = radius * 0.5; // 크기 증가<br />
<br />
// 흰색 플러스 기호 그리기<br />
ctx.lineWidth = iconSize * 0.3; // 더 굵게<br />
ctx.strokeStyle = 'white';<br />
<br />
// 수평선<br />
ctx.beginPath();<br />
ctx.moveTo(iconX - iconSize/2, iconY);<br />
ctx.lineTo(iconX + iconSize/2, iconY);<br />
ctx.stroke();<br />
<br />
// 수직선<br />
ctx.beginPath();<br />
ctx.moveTo(iconX, iconY - iconSize/2);<br />
ctx.lineTo(iconX, iconY + iconSize/2);<br />
ctx.stroke();<br />
};<br />
}<br />
<br />
}<br />
<br />
});<br />
<br />
// 3. 엣지 스타일 예시<br />
const edgeExamples = [<br />
{<br />
name: '기본 화살표',<br />
options: {<br />
arrows: { to: { enabled: true } },<br />
color: { color: '#848484' },<br />
width: 2<br />
}<br />
},<br />
{<br />
name: '양방향 화살표',<br />
options: {<br />
arrows: { to: { enabled: true }, from: { enabled: true } },<br />
color: { color: '#848484' },<br />
width: 2<br />
}<br />
},<br />
{<br />
name: '점선',<br />
options: {<br />
dashes: [5, 5],<br />
width: 2,<br />
color: { color: '#434343' }<br />
}<br />
},<br />
{<br />
name: '다양한 화살표 타입',<br />
options: {<br />
arrows: { to: { enabled: true, type: 'circle' } },<br />
color: { color: '#6A1B9A' },<br />
width: 2<br />
}<br />
},<br />
{<br />
name: '곡선 간선',<br />
options: {<br />
smooth: { enabled: true, type: 'curvedCW', roundness: 0.3 },<br />
arrows: { to: { enabled: true } },<br />
color: { color: '#00695C' },<br />
width: 2<br />
}<br />
},<br />
{<br />
name: '라벨 있는 간선',<br />
options: {<br />
label: '관계',<br />
font: { size: 12, align: 'middle' },<br />
color: { color: '#E65100', highlight: '#FF9800' },<br />
width: 2<br />
}<br />
}<br />
];<br />
<br />
const edgeContainer = document.getElementById('edgeExamples');<br />
edgeExamples.forEach(example => {<br />
const exampleItem = document.createElement('div');<br />
exampleItem.className = 'example-item';<br />
<br />
// 제목 추가<br />
const title = document.createElement('h4');<br />
title.textContent = example.name;<br />
exampleItem.appendChild(title);<br />
<br />
// 작은 네트워크 컨테이너 생성<br />
const networkContainer = document.createElement('div');<br />
networkContainer.style.margin = '0 auto';<br />
networkContainer.style.display = 'flex';<br />
networkContainer.style.justifyContent = 'center';<br />
networkContainer.style.alignItems = 'center';<br />
<br />
exampleItem.appendChild(networkContainer);<br />
<br />
edgeContainer.appendChild(exampleItem);<br />
<br />
// 노드와 엣지 생성<br />
const nodes = new vis.DataSet([<br />
{ id: 1, label: 'Node 1', x: -40, y: 0 },<br />
{ id: 2, label: 'Node 2', x: 40, y: 0 }<br />
]);<br />
<br />
const edges = new vis.DataSet([{<br />
from: 1,<br />
to: 2,<br />
...example.options<br />
}]);<br />
<br />
// 네트워크 생성<br />
const network = new vis.Network(networkContainer, { nodes, edges }, {<br />
physics: {<br />
enabled: true,<br />
stabilization: true,<br />
barnesHut: {<br />
gravitationalConstant: -2000,<br />
centralGravity: 0.1,<br />
springLength: 95,<br />
springConstant: 0.04,<br />
damping: 0.09<br />
}<br />
},<br />
interaction: {<br />
dragNodes: true,<br />
dragView: false,<br />
zoomView: false<br />
}<br />
});<br />
network.on("afterDrawing", function() {<br />
network.fit();<br />
});<br />
<br />
});<br />
<br />
// 4. 레이아웃 예시<br />
const layoutExamples = [<br />
{<br />
name: '표준 레이아웃',<br />
options: {<br />
layout: { improvedLayout: true },<br />
physics: { enabled: true, solver: 'barnesHut' }<br />
}<br />
},<br />
{<br />
name: '계층형 (위→아래)',<br />
options: {<br />
layout: {<br />
hierarchical: {<br />
enabled: true,<br />
direction: 'UD',<br />
sortMethod: 'directed'<br />
}<br />
},<br />
physics: { enabled: false }<br />
}<br />
},<br />
{<br />
name: '계층형 (좌→우)',<br />
options: {<br />
layout: {<br />
hierarchical: {<br />
enabled: true,<br />
direction: 'LR',<br />
sortMethod: 'directed'<br />
}<br />
},<br />
physics: { enabled: false }<br />
}<br />
},<br />
{<br />
name: 'ForceAtlas2 물리효과',<br />
options: {<br />
layout: { improvedLayout: true },<br />
physics: {<br />
enabled: true,<br />
solver: 'forceAtlas2Based',<br />
forceAtlas2Based: {<br />
gravitationalConstant: -50,<br />
centralGravity: 0.01,<br />
springLength: 100,<br />
springConstant: 0.08<br />
}<br />
}<br />
}<br />
},<br />
{<br />
name: '반발력 기반',<br />
options: {<br />
layout: { improvedLayout: true },<br />
physics: {<br />
enabled: true,<br />
solver: 'repulsion',<br />
repulsion: {<br />
nodeDistance: 120,<br />
centralGravity: 0.2<br />
}<br />
}<br />
}<br />
},<br />
{<br />
name: '물리효과 없음',<br />
options: {<br />
layout: { improvedLayout: true },<br />
physics: { enabled: false }<br />
}<br />
}<br />
];<br />
<br />
const layoutContainer = document.getElementById('layoutExamples');<br />
layoutExamples.forEach(example => {<br />
const exampleItem = document.createElement('div');<br />
exampleItem.className = 'example-item';<br />
<br />
// 제목 추가<br />
const title = document.createElement('h4');<br />
title.textContent = example.name;<br />
exampleItem.appendChild(title);<br />
<br />
// 작은 네트워크 컨테이너 생성<br />
const networkContainer = document.createElement('div');<br />
networkContainer.style.margin = '0 auto'; <br />
networkContainer.style.display = 'flex';<br />
networkContainer.style.justifyContent = 'center';<br />
networkContainer.style.alignItems = 'center';<br />
<br />
exampleItem.appendChild(networkContainer);<br />
<br />
layoutContainer.appendChild(exampleItem);<br />
<br />
// 샘플 그래프 데이터 생성<br />
const nodes = new vis.DataSet([<br />
{ id: 1, label: '1' },<br />
{ id: 2, label: '2' },<br />
{ id: 3, label: '3' },<br />
{ id: 4, label: '4' },<br />
{ id: 5, label: '5' }<br />
]);<br />
<br />
const edges = new vis.DataSet([<br />
{ from: 1, to: 2 },<br />
{ from: 1, to: 3 },<br />
{ from: 2, to: 4 },<br />
{ from: 2, to: 5 }<br />
]);<br />
<br />
// 네트워크 생성<br />
const network = new vis.Network(networkContainer, { nodes, edges }, example.options);<br />
network.on("afterDrawing", function() {<br />
network.fit();<br />
});<br />
});<br />
<br />
// 탭 전환 함수<br />
function showTab(tabId) {<br />
// 모든 탭 컨텐츠 숨기기<br />
var tabContents = document.getElementsByClassName("tab-content");<br />
for (var i = 0; i < tabContents.length; i++) {<br />
tabContents[i].classList.remove("active");<br />
}<br />
<br />
// 모든 탭 비활성화<br />
var tabs = document.getElementsByClassName("tab");<br />
for (var i = 0; i < tabs.length; i++) {<br />
tabs[i].classList.remove("active");<br />
}<br />
<br />
// 선택한 탭 컨텐츠 보이기<br />
document.getElementById(tabId).classList.add("active");<br />
<br />
// 선택한 탭 활성화<br />
var selectedTab = document.querySelector(".tab[onclick*='" + tabId + "']");<br />
if (selectedTab) {<br />
selectedTab.classList.add("active");<br />
}<br />
}<br />
<br />
// 페이지 로드 시 디자인 예제 생성<br />
window.onload = function() {<br />
createDesignExamples();<br />
};<br />
}<br />
<br />
// 탭 전환 함수<br />
function showTab(tabId) {<br />
// 모든 탭 컨텐츠 숨기기<br />
var tabContents = document.getElementsByClassName("tab-content");<br />
for (var i = 0; i < tabContents.length; i++) {<br />
tabContents[i].classList.remove("active");<br />
}<br />
<br />
// 모든 탭 비활성화<br />
var tabs = document.getElementsByClassName("tab");<br />
for (var i = 0; i < tabs.length; i++) {<br />
tabs[i].classList.remove("active");<br />
}<br />
<br />
// 선택한 탭 컨텐츠 보이기<br />
document.getElementById(tabId).classList.add("active");<br />
<br />
// 선택한 탭 활성화<br />
var selectedTab = document.querySelector(".tab[onclick*='" + tabId + "']");<br />
if (selectedTab) {<br />
selectedTab.classList.add("active");<br />
}<br />
}<br />
<br />
// 페이지 로드 시 디자인 예제 생성<br />
window.onload = function() {<br />
createDesignExamples();<br />
};<br />
</script><br />
}}</div>
Ec3admin