728x90
반응형
자바스크립트로 마인드맵을 구현할 수 있을까요?
네, 자바스크립트를 사용하여 마인드맵을 구현할 수 있습니다.
이를 위해 D3.js, GoJS, vis.js 등의 라이브러리를 사용할 수 있습니다.
✅ 구현 방식
- 데이터 구조화
- 트리 형태(JSON)로 데이터를 구성하여 계층적인 구조를 표현합니다.
- 라이브러리 선택
- D3.js: 강력한 데이터 시각화 도구지만 학습 난이도가 있음.
- GoJS: 마인드맵, 다이어그램 등의 UI에 최적화된 라이브러리.
- vis.js: 그래프 네트워크 표현이 쉬운 라이브러리.
- 마인드맵 렌더링
- 트리 구조를 기반으로 노드와 링크를 생성하여 표시합니다.
✅ 예제 코드 (vis.js 사용)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마인드맵</title>
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<style>
#mynetwork {
width: 100%;
height: 600px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<h2>중학교 마인드맵</h2>
<div id="mynetwork"></div>
<script>
// 데이터 정의 (트리 구조)
var nodes = new vis.DataSet([
{ id: 1, label: "중학교", level: 0 },
{ id: 2, label: "일반중학교", level: 1 },
{ id: 3, label: "특성화중학교", level: 1 },
{ id: 4, label: "대안학교", level: 1 },
{ id: 5, label: "공립중학교", level: 3 },
{ id: 6, label: "사립중학교", level: 3 },
{ id: 7, label: "공립", level: 2 },
{ id: 8, label: "사립", level: 2 },
{ id: 9, label: "국제중학교", level: 3 },
{ id: 10, label: "대안중학교", level: 3 },
{ id: 11, label: "예술중학교", level: 3 },
{ id: 12, label: "체육중학교", level: 3 },
{ id: 13, label: "인가", level: 2 },
{ id: 14, label: "비인가", level: 2 },
{ id: 15, label: "공립대안학교", level: 3 },
{ id: 16, label: "사립대안학교", level: 3 },
]);
var edges = new vis.DataSet([
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 1, to: 4 },
{ from: 2, to: 5 },
{ from: 2, to: 6 },
{ from: 3, to: 7 },
{ from: 3, to: 8 },
{ from: 8, to: 9 },
{ from: 8, to: 10 },
{ from: 8, to: 11 },
{ from: 8, to: 12 },
{ from: 7, to: 9 },
{ from: 7, to: 10 },
{ from: 7, to: 11 },
{ from: 7, to: 12 },
{ from: 4, to: 13 },
{ from: 4, to: 14 },
{ from: 13, to: 15 },
{ from: 13, to: 16 },
{ from: 14, to: 15 },
{ from: 14, to: 16 },
]);
var container = document.getElementById("mynetwork");
var data = { nodes: nodes, edges: edges };
var options = {
layout: {
hierarchical: {
enabled: true,
levelSeparation: 100, // 각 계층 간 간격 조정
nodeSpacing: 100, // 같은 계층 노드 간 간격 조정
treeSpacing: 100,
direction: "UD", // 위에서 아래 방향 (Top to Bottom) UD
sortMethod: "directed"
}
},
nodes: {
shape: "box", // ellipse, box, circle
font: { size:16 }
},
edges: {
arrows: "to",
smooth: { type: "cubicBezier", forceDirection: "vertical" } // 부드러운 곡선 연결
},
interaction: { hover: true },
};
var network = new vis.Network(container, data, options);
// 노드 클릭 시 링크 열기
network.on("click", function (params) {
if (params.nodes.length > 0) {
var nodeId = params.nodes[0];
var node = nodes.get(nodeId);
if (node.url) {
window.open(node.url, "_blank");
}
}
});
</script>
</body>
</html>
vis.js 라이브러리를 사용하여 트리구조의 간단한 마인드맵을 생성해 보았습니다.
다음은 이 소스를 이용하여 작성한 예시입니다.
대한민국에는 어떠한 중학교가 있을까요?
대한민국에는 어떠한 중학교가 있을까요? 대한민국의 교육 체계는 유치원 - 초등학교 - 중학교 - 고등학교 - 대학교 - 대학원입니다. 대한민국은 초등학교, 중학교가 의무교육이고 무상 교
hb-love-each-other.tistory.com
vis.js
vis.js community edition A dynamic, browser based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components
visjs.org
728x90
반응형
'컴퓨터에서는' 카테고리의 다른 글
| [ Rust ] 초급 문법 : 1. 변수와 상수 (let, const) – 변수와 상수를 선언하는 방법 (2) | 2025.03.06 |
|---|---|
| [ Rust ] 러스트의 문법에는 어떠한 것들이 있을까요? (4) | 2025.03.06 |
| [ Python ] 파이썬에서 ajax처럼 접속할 수 있을까요? (2) | 2025.03.04 |
| [ Rust ] VS Code를 설치하고 러스트 개발 환경을 설정해 보겠습니다. (2) | 2025.03.02 |
| [ Rust ] 러스트에 적합한 소스 코드 편집기는 무엇이 있을까요? (2) | 2025.03.02 |
댓글