"의미관계망"의 두 판 사이의 차이
광주문화예술인문스토리플랫폼
(새 문서: {{#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: #...) |
|||
| 2번째 줄: | 2번째 줄: | ||
<script type="text/javascript" src="https://dh.aks.ac.kr/Graph/vis/dist/vis.js"></script> | <script type="text/javascript" src="https://dh.aks.ac.kr/Graph/vis/dist/vis.js"></script> | ||
<style> | <style> | ||
| − | + | #mynetwork { | |
| − | + | width: 90%; | |
| − | + | height: 70vh; | |
| − | + | background-color: #ffffff; | |
| − | + | border: 1px solid lightgray; | |
| − | + | margin: 0 auto; | |
| − | + | display: flex; | |
| − | + | justify-content: center; | |
| − | + | align-items: center; | |
| − | + | } | |
| − | + | #designGuide { | |
| − | + | width: 100%; | |
| − | + | margin-top: 60px; | |
| − | + | } | |
| − | + | #designGuide >h2{ | |
| − | + | font-size:28px; | |
| − | + | font-weight:700; | |
| − | + | } | |
| − | + | #designGuide >h2 + p{ | |
| − | + | font-size:16px; | |
| − | + | } | |
| − | + | .design-section { | |
| − | + | margin-top:40px; | |
| − | + | } | |
| − | + | .design-section h3 { | |
| − | + | font-size:20px; | |
| − | + | font-weight:bold; | |
| − | + | margin:0; | |
| − | + | } | |
| − | + | .design-section h3 + p{ | |
| − | + | margin-top:8px; | |
| − | + | font-size:16px; | |
| − | + | margin-bottom:0; | |
| − | + | ||
| − | + | } | |
| − | + | .example-grid { | |
| − | + | display: grid; | |
| − | + | grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); | |
| − | + | gap: 28px; | |
| − | + | margin-top: 24px; | |
| − | + | padding-top:22px; | |
| − | + | border-top:1px solid #eee; | |
| − | + | } | |
| − | + | .example-item { | |
| − | + | border: 1px solid #eee; | |
| − | + | border-radius: 12px; | |
| − | + | text-align: center; | |
| − | + | min-height:240px; | |
| − | + | padding:20px; | |
| − | + | display:flex; | |
| − | + | flex-direction: column; | |
| − | + | justify-content: center; | |
| − | + | align-items: center; | |
| − | + | } | |
| − | + | .example-item >div{ | |
| − | + | width:100%; | |
| − | + | flex:1; | |
| − | + | max-height:240px; | |
| − | + | } | |
| − | + | .example-item h4 { | |
| − | + | font-size: 16px; | |
| − | + | margin-top: 0; | |
| − | + | margin-bottom: 12px; | |
| − | + | } | |
| − | + | .example-item pre { | |
| − | + | background-color: #f5f5f5; | |
| − | + | padding: 15px; | |
| − | + | border-radius: 6px; | |
| − | + | overflow-x: auto; | |
| − | + | text-align: left; | |
| − | + | font-size: 16px; | |
| − | + | margin-top: 15px; | |
| − | + | border: 1px solid #e0e0e0; | |
| − | + | line-height: 1.5; | |
| − | + | max-height: 300px; | |
| − | + | overflow-y: auto; | |
| − | + | } | |
| − | + | .color-box { | |
| − | + | width: 40px; | |
| − | + | height: 40px; | |
| − | + | border-radius: 4px; | |
| − | + | display: inline-block; | |
| − | + | margin-right: 10px; | |
| − | + | vertical-align: middle; | |
| − | + | } | |
| − | + | .edge-example { | |
| − | + | width: 100%; | |
| − | + | height: 80px; | |
| − | + | background-color: white; | |
| − | + | position: relative; | |
| − | + | margin-bottom: 15px; | |
| − | + | } | |
| − | + | .tab-container { | |
| − | + | display: flex; | |
| − | + | margin-top: 40px; | |
| − | + | background-color:#f9f9f9; | |
| − | + | border:1px solid #ddd; | |
| − | + | } | |
| − | + | .tab { | |
| − | + | flex:1; | |
| − | + | text-align:center; | |
| − | + | padding: 12px 0; | |
| − | + | cursor: pointer; | |
| − | + | border: 1px solid transparent; | |
| − | + | border-bottom: none; | |
| − | + | font-family: Pretendard; | |
| − | + | font-weight: 700; | |
| − | + | font-size: 16px; | |
| − | + | line-height: 26px; | |
| − | + | letter-spacing: 0%; | |
| − | + | } | |
| − | + | .tab + .tab{ | |
| − | + | border-left:1px solid #eee; | |
| − | + | } | |
| − | + | .tab.active { | |
| − | + | background-color: #181818; | |
| − | + | color: #fff; | |
| − | + | } | |
| − | + | .tab-content { | |
| − | + | display: none; | |
| − | + | } | |
| − | + | .tab-content.active { | |
| − | + | display: block; | |
| − | + | } | |
| − | + | @media screen and (max-width: 991px) { | |
| − | + | #designGuide{ | |
| − | + | margin-top:40px; | |
| − | + | } | |
| − | + | #designGuide >h2{ | |
| − | + | font-size:20px; | |
| − | + | } | |
| − | + | .tab-container{ | |
| − | + | flex-wrap:wrap;margin-top:24px; | |
| − | + | } | |
| − | + | .tab{ | |
| − | + | flex:1 0 auto; | |
| − | + | width:50%; | |
| − | + | } | |
| − | + | .tab:nth-child(1n-2){ | |
| − | + | border-bottom:1px solid #eee; | |
| − | + | } | |
| − | + | .design-section{ | |
| − | + | margin-top:24px; | |
| − | + | } | |
| − | + | .design-section h3{ | |
| − | + | margin-bottom:4px; | |
| − | + | } | |
| − | + | } | |
</style> | </style> | ||
| 155번째 줄: | 155번째 줄: | ||
<div id="designGuide"> | <div id="designGuide"> | ||
| − | + | <h2>vis.js 디자인 가이드</h2> | |
| − | + | <p>이 가이드는 vis.js 라이브러리를 사용한 네트워크 그래프 디자인 옵션을 보여줍니다.</p> | |
| − | + | ||
| − | + | <div class="tab-container"> | |
| − | + | <div class="tab active" onclick="showTab('nodeShapes')">노드 모양</div> | |
| − | + | <div class="tab" onclick="showTab('nodeStyles')">노드 스타일</div> | |
| − | + | <div class="tab" onclick="showTab('edgeStyles')">엣지 스타일</div> | |
| − | + | <div class="tab" onclick="showTab('layouts')">레이아웃</div> | |
| − | + | </div> | |
| − | + | ||
| − | + | <div id="nodeShapes" class="tab-content active"> | |
| − | + | <div class="design-section"> | |
| − | + | <h3>1. 노드 모양 (Shape)</h3> | |
| − | + | <p>vis.js는 다양한 노드 모양을 제공합니다:</p> | |
| − | + | <div class="example-grid" id="shapeExamples"> | |
| − | + | <!-- 여기에 노드 모양 예시가 동적으로 추가됩니다 --> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| − | + | <div id="nodeStyles" class="tab-content"> | |
| − | + | <div class="design-section"> | |
| − | + | <h3>2. 노드 스타일링</h3> | |
| − | + | <p>노드의 색상, 테두리, 폰트 등을 커스터마이징할 수 있습니다:</p> | |
| − | + | <div class="example-grid" id="styleExamples"> | |
| − | + | <!-- 여기에 노드 스타일 예시가 동적으로 추가됩니다 --> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| − | + | <div id="edgeStyles" class="tab-content"> | |
| − | + | <div class="design-section"> | |
| − | + | <h3>3. 엣지(간선) 스타일링</h3> | |
| − | + | <p>엣지의 색상, 두께, 화살표 등을 설정할 수 있습니다:</p> | |
| − | + | <div class="example-grid" id="edgeExamples"> | |
| − | + | <!-- 여기에 엣지 스타일 예시가 동적으로 추가됩니다 --> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| − | + | <div id="layouts" class="tab-content"> | |
| − | + | <div class="design-section"> | |
| − | + | <h3>4. 네트워크 레이아웃</h3> | |
| − | + | <p>그래프의 전체 레이아웃과 물리 효과를 설정할 수 있습니다:</p> | |
| − | + | <div class="example-grid" id="layoutExamples"> | |
| − | + | <!-- 여기에 레이아웃 예시가 동적으로 추가됩니다 --> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
</div> | </div> | ||
<script> | <script> | ||
| − | + | // 디자인 가이드 예시 생성 함수 | |
| − | + | function createDesignExamples() { | |
| − | + | // 1. 노드 모양 예시 | |
| − | + | const shapeTypes = [ | |
| − | + | { shape: 'ellipse', label: 'ellipse' }, | |
| − | + | { shape: 'circle', label: 'circle' }, | |
| − | + | { shape: 'box', label: 'box' }, | |
| − | + | { shape: 'text', label: 'text' }, | |
| − | + | { shape: 'diamond', label: 'diamond' }, | |
| − | + | { shape: 'dot', label: 'dot' }, | |
| − | + | { shape: 'star', label: 'star' }, | |
| − | + | { shape: 'triangle', label: 'triangle' }, | |
| − | + | { shape: 'triangleDown', label: 'triangleDown' }, | |
| − | + | { shape: 'hexagon', label: 'hexagon' }, | |
| − | + | { shape: 'square', label: 'square' }, | |
| − | + | { shape: 'image', label: 'image', image: 'https://dh.aks.ac.kr/~gwangju/icon/photo/icon-Orchestra.jpg' }, | |
| − | + | { shape: 'circularImage', label: 'circularImage', image: 'https://dh.aks.ac.kr/~gwangju/icon/photo/icon-Orchestra.jpg' } | |
| − | + | ]; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | const shapeContainer = document.getElementById('shapeExamples'); | |
| − | + | shapeTypes.forEach(shapeInfo => { | |
| − | + | const exampleItem = document.createElement('div'); | |
| − | + | exampleItem.className = 'example-item'; | |
| − | + | // 작은 네트워크 컨테이너 생성 | |
| − | + | const networkContainer = document.createElement('div'); | |
| − | + | networkContainer.style.margin = '0 auto'; | |
| − | + | networkContainer.style.display = 'flex'; | |
| + | networkContainer.style.justifyContent = 'center'; | ||
| + | networkContainer.style.alignItems = 'center'; | ||
| − | + | exampleItem.appendChild(networkContainer); | |
| − | + | shapeContainer.appendChild(exampleItem); | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | // 노드 생성 | |
| + | const nodes = new vis.DataSet([{ | ||
| + | id: 1, | ||
| + | label: shapeInfo.label, | ||
| + | shape: shapeInfo.shape, | ||
| + | image: shapeInfo.image | ||
| + | }]); | ||
| − | + | // 네트워크 생성 | |
| + | const network = new vis.Network(networkContainer, { nodes }, { | ||
| + | nodes: { | ||
| + | size: 40, | ||
| + | font: { size: 14 } | ||
| + | }, | ||
| + | physics: { | ||
| + | enabled: true, | ||
| + | stabilization: true, | ||
| + | barnesHut: { | ||
| + | gravitationalConstant: -2000, | ||
| + | centralGravity: 0.1, | ||
| + | springLength: 95, | ||
| + | springConstant: 0.04, | ||
| + | damping: 0.09 | ||
| + | } | ||
| + | }, | ||
| + | interaction: { | ||
| + | dragNodes: true, | ||
| + | dragView: false, | ||
| + | zoomView: false | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | // 네트워크 캔버스 중앙 정렬 | ||
| + | network.on("afterDrawing", function(ctx) { | ||
| + | network.fit(); | ||
| + | }); | ||
| − | + | }); | |
| − | + | ||
| − | + | // 2. 노드 스타일 예시 | |
| − | + | const nodeStyleExamples = [ | |
| − | + | { | |
| − | + | name: '기본 스타일', | |
| + | options: { | ||
| + | shape: 'circle', | ||
| + | color: { | ||
| + | background: '#97C2FC', | ||
| + | border: '#2B7CE9' | ||
| + | }, | ||
| + | borderWidth: 2 | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | name: '아이콘 오버레이', | ||
| + | customRender: true, | ||
| + | options: { | ||
| + | shape: 'circularImage', | ||
| + | image: 'https://img.icons8.com/color/48/church.png', | ||
| + | borderWidth: 3, | ||
| + | borderWidthSelected: 5, | ||
| + | color: { | ||
| + | border: '#03A9F4', | ||
| + | background: '#E1F5FE' | ||
| + | }, | ||
| + | size: 40 | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | name: '하이라이트 효과', | ||
| + | options: { | ||
| + | color: { | ||
| + | background: '#97C2FC', | ||
| + | border: '#2B7CE9', | ||
| + | highlight: { background: '#D2E5FF', border: '#2B7CE9' } | ||
| + | }, | ||
| + | size: 30 | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | name: '그림자 효과', | ||
| + | options: { | ||
| + | color: { background: '#FFD86E', border: '#EDAA25' }, | ||
| + | shadow: { enabled: true, color: 'rgba(0,0,0,0.5)', size: 10, x: 5, y: 5 }, | ||
| + | size: 30 | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | name: '검정 배경 흰색 글씨', | ||
| + | options: { | ||
| + | color: { background: 'black', border: '#333' }, | ||
| + | font: { color: 'white', size: 14 }, | ||
| + | size: 30 | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | name: '둥근 이미지', | ||
| + | options: { | ||
| + | shape: 'circularImage', | ||
| + | image: 'https://dh.aks.ac.kr/~gwangju/icon/photo/icon-Orchestra.jpg', | ||
| + | size: 30 | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | name: '커스텀 폰트', | ||
| + | options: { | ||
| + | font: { face: '함초롬바탕', color: '#772244', size: 16, bold: true }, | ||
| + | color: { background: '#FFECB3' }, | ||
| + | size: 30 | ||
| + | } | ||
| + | } | ||
| + | ]; | ||
| − | + | const styleContainer = document.getElementById('styleExamples'); | |
| − | + | nodeStyleExamples.forEach(example => { | |
| − | + | const exampleItem = document.createElement('div'); | |
| − | + | exampleItem.className = 'example-item'; | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | // 제목 추가 | |
| − | + | const title = document.createElement('h4'); | |
| − | + | title.textContent = example.name; | |
| − | + | exampleItem.appendChild(title); | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | // 작은 네트워크 컨테이너 생성 | |
| − | + | const networkContainer = document.createElement('div'); | |
| − | + | networkContainer.style.margin = '0 auto'; | |
| − | + | networkContainer.style.display = 'flex'; | |
| + | networkContainer.style.justifyContent = 'center'; | ||
| + | networkContainer.style.alignItems = 'center'; | ||
| + | networkContainer.style.position = 'relative'; | ||
| − | |||
| − | |||
| − | |||
| − | |||
exampleItem.appendChild(networkContainer); | exampleItem.appendChild(networkContainer); | ||
2025년 8월 20일 (수) 16:58 기준 최신판
vis.js 디자인 가이드
이 가이드는 vis.js 라이브러리를 사용한 네트워크 그래프 디자인 옵션을 보여줍니다.
노드 모양
노드 스타일
엣지 스타일
레이아웃
1. 노드 모양 (Shape)
vis.js는 다양한 노드 모양을 제공합니다:
2. 노드 스타일링
노드의 색상, 테두리, 폰트 등을 커스터마이징할 수 있습니다:
3. 엣지(간선) 스타일링
엣지의 색상, 두께, 화살표 등을 설정할 수 있습니다:
4. 네트워크 레이아웃
그래프의 전체 레이아웃과 물리 효과를 설정할 수 있습니다: