"테스트"의 두 판 사이의 차이
| 60번째 줄: | 60번째 줄: | ||
== 위키문법 == | == 위키문법 == | ||
| + | |||
{{#categorytree:독립운동가|mode=pages|depth=5|hideroot="on"|}} | {{#categorytree:독립운동가|mode=pages|depth=5|hideroot="on"|}} | ||
| 83번째 줄: | 84번째 줄: | ||
{{숨김 시작|독립운동가}} | {{숨김 시작|독립운동가}} | ||
<categorytree mode="pages" depth="5" ...>독립운동가</categorytree> | <categorytree mode="pages" depth="5" ...>독립운동가</categorytree> | ||
| + | |||
| + | == 아아 == | ||
| + | {{#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; | ||
| + | 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> | ||
| + | |||
| + | <iframe width="100%" height="800px" src="https://dh.aks.ac.kr/~sandbox/cgi-bin/GuestQuery.py?db=gwangju&project=gwangju&key=우일선선교사사택"></iframe> | ||
| + | |||
| + | <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> | ||
| + | |||
| + | <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); | ||
| + | |||
| + | styleContainer.appendChild(exampleItem); | ||
| + | |||
| + | // 노드 생성 | ||
| + | const nodes = new vis.DataSet([{ | ||
| + | id: 1, | ||
| + | label: '노드', | ||
| + | ...example.options | ||
| + | }]); | ||
| + | |||
| + | // 네트워크 생성 | ||
| + | const network = new vis.Network(networkContainer, { nodes }, { | ||
| + | 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() { | ||
| + | network.fit(); | ||
| + | }); | ||
| + | |||
| + | // 아이콘 오버레이를 위한 새로운 방식 적용 | ||
| + | if(example.customRender){ | ||
| + | if (example.name === '아이콘 오버레이' ) { | ||
| + | // 노드 렌더링 함수 재정의 | ||
| + | const originalDrawFunction = network.body.nodes[1].shape.draw; | ||
| + | network.body.nodes[1].shape.draw = function(ctx, x, y, selected, hover, values) { | ||
| + | // 기본 노드 그리기 | ||
| + | originalDrawFunction.call(this, ctx, x, y, selected, hover, values); | ||
| + | |||
| + | // 노드 크기 가져오기 | ||
| + | const radius = values.size; | ||
| + | |||
| + | // + 아이콘 배경 그리기 | ||
| + | ctx.fillStyle = '#FF5722'; | ||
| + | ctx.beginPath(); | ||
| + | ctx.arc(x + radius*0.7, y - radius*0.7, radius*0.35, 0, 2 * Math.PI); | ||
| + | ctx.fill(); | ||
| + | ctx.strokeStyle = 'white'; | ||
| + | ctx.lineWidth = 2; | ||
| + | ctx.stroke(); | ||
| + | |||
| + | // 플러스 기호 그리기 - 더 굵고 큰 선으로 그리기 | ||
| + | const iconX = x + radius*0.7; | ||
| + | const iconY = y - radius*0.7; | ||
| + | const iconSize = radius * 0.5; // 크기 증가 | ||
| + | |||
| + | // 흰색 플러스 기호 그리기 | ||
| + | ctx.lineWidth = iconSize * 0.3; // 더 굵게 | ||
| + | ctx.strokeStyle = 'white'; | ||
| + | |||
| + | // 수평선 | ||
| + | ctx.beginPath(); | ||
| + | ctx.moveTo(iconX - iconSize/2, iconY); | ||
| + | ctx.lineTo(iconX + iconSize/2, iconY); | ||
| + | ctx.stroke(); | ||
| + | |||
| + | // 수직선 | ||
| + | ctx.beginPath(); | ||
| + | ctx.moveTo(iconX, iconY - iconSize/2); | ||
| + | ctx.lineTo(iconX, iconY + iconSize/2); | ||
| + | ctx.stroke(); | ||
| + | }; | ||
| + | } | ||
| + | |||
| + | } | ||
| + | |||
| + | }); | ||
| + | |||
| + | // 3. 엣지 스타일 예시 | ||
| + | const edgeExamples = [ | ||
| + | { | ||
| + | name: '기본 화살표', | ||
| + | options: { | ||
| + | arrows: { to: { enabled: true } }, | ||
| + | color: { color: '#848484' }, | ||
| + | width: 2 | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | name: '양방향 화살표', | ||
| + | options: { | ||
| + | arrows: { to: { enabled: true }, from: { enabled: true } }, | ||
| + | color: { color: '#848484' }, | ||
| + | width: 2 | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | name: '점선', | ||
| + | options: { | ||
| + | dashes: [5, 5], | ||
| + | width: 2, | ||
| + | color: { color: '#434343' } | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | name: '다양한 화살표 타입', | ||
| + | options: { | ||
| + | arrows: { to: { enabled: true, type: 'circle' } }, | ||
| + | color: { color: '#6A1B9A' }, | ||
| + | width: 2 | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | name: '곡선 간선', | ||
| + | options: { | ||
| + | smooth: { enabled: true, type: 'curvedCW', roundness: 0.3 }, | ||
| + | arrows: { to: { enabled: true } }, | ||
| + | color: { color: '#00695C' }, | ||
| + | width: 2 | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | name: '라벨 있는 간선', | ||
| + | options: { | ||
| + | label: '관계', | ||
| + | font: { size: 12, align: 'middle' }, | ||
| + | color: { color: '#E65100', highlight: '#FF9800' }, | ||
| + | width: 2 | ||
| + | } | ||
| + | } | ||
| + | ]; | ||
| + | |||
| + | const edgeContainer = document.getElementById('edgeExamples'); | ||
| + | edgeExamples.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'; | ||
| + | |||
| + | exampleItem.appendChild(networkContainer); | ||
| + | |||
| + | edgeContainer.appendChild(exampleItem); | ||
| + | |||
| + | // 노드와 엣지 생성 | ||
| + | const nodes = new vis.DataSet([ | ||
| + | { id: 1, label: 'Node 1', x: -40, y: 0 }, | ||
| + | { id: 2, label: 'Node 2', x: 40, y: 0 } | ||
| + | ]); | ||
| + | |||
| + | const edges = new vis.DataSet([{ | ||
| + | from: 1, | ||
| + | to: 2, | ||
| + | ...example.options | ||
| + | }]); | ||
| + | |||
| + | // 네트워크 생성 | ||
| + | const network = new vis.Network(networkContainer, { nodes, edges }, { | ||
| + | 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() { | ||
| + | network.fit(); | ||
| + | }); | ||
| + | |||
| + | }); | ||
| + | |||
| + | // 4. 레이아웃 예시 | ||
| + | const layoutExamples = [ | ||
| + | { | ||
| + | name: '표준 레이아웃', | ||
| + | options: { | ||
| + | layout: { improvedLayout: true }, | ||
| + | physics: { enabled: true, solver: 'barnesHut' } | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | name: '계층형 (위→아래)', | ||
| + | options: { | ||
| + | layout: { | ||
| + | hierarchical: { | ||
| + | enabled: true, | ||
| + | direction: 'UD', | ||
| + | sortMethod: 'directed' | ||
| + | } | ||
| + | }, | ||
| + | physics: { enabled: false } | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | name: '계층형 (좌→우)', | ||
| + | options: { | ||
| + | layout: { | ||
| + | hierarchical: { | ||
| + | enabled: true, | ||
| + | direction: 'LR', | ||
| + | sortMethod: 'directed' | ||
| + | } | ||
| + | }, | ||
| + | physics: { enabled: false } | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | name: 'ForceAtlas2 물리효과', | ||
| + | options: { | ||
| + | layout: { improvedLayout: true }, | ||
| + | physics: { | ||
| + | enabled: true, | ||
| + | solver: 'forceAtlas2Based', | ||
| + | forceAtlas2Based: { | ||
| + | gravitationalConstant: -50, | ||
| + | centralGravity: 0.01, | ||
| + | springLength: 100, | ||
| + | springConstant: 0.08 | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | name: '반발력 기반', | ||
| + | options: { | ||
| + | layout: { improvedLayout: true }, | ||
| + | physics: { | ||
| + | enabled: true, | ||
| + | solver: 'repulsion', | ||
| + | repulsion: { | ||
| + | nodeDistance: 120, | ||
| + | centralGravity: 0.2 | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | }, | ||
| + | { | ||
| + | name: '물리효과 없음', | ||
| + | options: { | ||
| + | layout: { improvedLayout: true }, | ||
| + | physics: { enabled: false } | ||
| + | } | ||
| + | } | ||
| + | ]; | ||
| + | |||
| + | const layoutContainer = document.getElementById('layoutExamples'); | ||
| + | layoutExamples.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'; | ||
| + | |||
| + | exampleItem.appendChild(networkContainer); | ||
| + | |||
| + | layoutContainer.appendChild(exampleItem); | ||
| + | |||
| + | // 샘플 그래프 데이터 생성 | ||
| + | const nodes = new vis.DataSet([ | ||
| + | { id: 1, label: '1' }, | ||
| + | { id: 2, label: '2' }, | ||
| + | { id: 3, label: '3' }, | ||
| + | { id: 4, label: '4' }, | ||
| + | { id: 5, label: '5' } | ||
| + | ]); | ||
| + | |||
| + | const edges = new vis.DataSet([ | ||
| + | { from: 1, to: 2 }, | ||
| + | { from: 1, to: 3 }, | ||
| + | { from: 2, to: 4 }, | ||
| + | { from: 2, to: 5 } | ||
| + | ]); | ||
| + | |||
| + | // 네트워크 생성 | ||
| + | const network = new vis.Network(networkContainer, { nodes, edges }, example.options); | ||
| + | network.on("afterDrawing", function() { | ||
| + | network.fit(); | ||
| + | }); | ||
| + | }); | ||
| + | |||
| + | // 탭 전환 함수 | ||
| + | function showTab(tabId) { | ||
| + | // 모든 탭 컨텐츠 숨기기 | ||
| + | var tabContents = document.getElementsByClassName("tab-content"); | ||
| + | for (var i = 0; i < tabContents.length; i++) { | ||
| + | tabContents[i].classList.remove("active"); | ||
| + | } | ||
| + | |||
| + | // 모든 탭 비활성화 | ||
| + | var tabs = document.getElementsByClassName("tab"); | ||
| + | for (var i = 0; i < tabs.length; i++) { | ||
| + | tabs[i].classList.remove("active"); | ||
| + | } | ||
| + | |||
| + | // 선택한 탭 컨텐츠 보이기 | ||
| + | document.getElementById(tabId).classList.add("active"); | ||
| + | |||
| + | // 선택한 탭 활성화 | ||
| + | var selectedTab = document.querySelector(".tab[onclick*='" + tabId + "']"); | ||
| + | if (selectedTab) { | ||
| + | selectedTab.classList.add("active"); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | // 페이지 로드 시 디자인 예제 생성 | ||
| + | window.onload = function() { | ||
| + | createDesignExamples(); | ||
| + | }; | ||
| + | } | ||
| + | |||
| + | // 탭 전환 함수 | ||
| + | function showTab(tabId) { | ||
| + | // 모든 탭 컨텐츠 숨기기 | ||
| + | var tabContents = document.getElementsByClassName("tab-content"); | ||
| + | for (var i = 0; i < tabContents.length; i++) { | ||
| + | tabContents[i].classList.remove("active"); | ||
| + | } | ||
| + | |||
| + | // 모든 탭 비활성화 | ||
| + | var tabs = document.getElementsByClassName("tab"); | ||
| + | for (var i = 0; i < tabs.length; i++) { | ||
| + | tabs[i].classList.remove("active"); | ||
| + | } | ||
| + | |||
| + | // 선택한 탭 컨텐츠 보이기 | ||
| + | document.getElementById(tabId).classList.add("active"); | ||
| + | |||
| + | // 선택한 탭 활성화 | ||
| + | var selectedTab = document.querySelector(".tab[onclick*='" + tabId + "']"); | ||
| + | if (selectedTab) { | ||
| + | selectedTab.classList.add("active"); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | // 페이지 로드 시 디자인 예제 생성 | ||
| + | window.onload = function() { | ||
| + | createDesignExamples(); | ||
| + | }; | ||
| + | </script> | ||
| + | }} | ||
| + | |||
[[분류:테스트]] | [[분류:테스트]] | ||
[[Category:테스팅]] | [[Category:테스팅]] | ||
2025년 9월 18일 (목) 02:30 기준 최신판
25
과거
설문조사
응답 결과
분류
위키문법
분류 관련
- 분류 컨텐츠 펼침 + 분류 이름 보이기 + 갯수 셈
- 분류 컨텐츠 펼침 + 분류 이름 안보이기
- 분류 컨텐츠 접음 + 분류 이름 보이기 + 갯수 셈
► 독립운동가
- 분류 컨텐츠 접음
독립운동가
아아
vis.js 디자인 가이드
이 가이드는 vis.js 라이브러리를 사용한 네트워크 그래프 디자인 옵션을 보여줍니다.
노드 모양
노드 스타일
엣지 스타일
레이아웃
1. 노드 모양 (Shape)
vis.js는 다양한 노드 모양을 제공합니다:
2. 노드 스타일링
노드의 색상, 테두리, 폰트 등을 커스터마이징할 수 있습니다:
3. 엣지(간선) 스타일링
엣지의 색상, 두께, 화살표 등을 설정할 수 있습니다:
4. 네트워크 레이아웃
그래프의 전체 레이아웃과 물리 효과를 설정할 수 있습니다: