[javascript] D3.js를 이용한 폴더 트리 그리기
D3.js는 JavaScript를 사용하여 데이터 중심의 동적 그래픽을 생성하기 위한 강력한 도구입니다. 이번 블로그 포스트에서는 D3.js를 사용하여 폴더 트리를 그리는 방법을 알아보겠습니다.
폴더 트리란?
폴더 트리는 파일 및 폴더의 계층 구조를 시각화한 그래프입니다. 각각의 노드는 폴더 또는 파일을 나타내며, 상위 폴더와 하위 폴더 및 파일 간의 관계를 나타냅니다. 이러한 폴더 트리를 그려서 사용자는 파일 시스템을 더 시각적으로 이해할 수 있습니다.
D3.js와 SVG 기본 개념
D3.js는 Scalable Vector Graphics(SVG)를 사용하여 그래프를 그립니다. SVG는 XML 기반의 벡터 이미지 포맷으로, 웹 브라우저에서 그래픽을 렌더링하는 데 사용됩니다. 이번 예제에서는 SVG를 사용하여 폴더 트리를 그리겠습니다.
폴더 트리 그리기 예제 코드
다음은 D3.js를 사용하여 폴더 트리를 그리는 예제 코드입니다:
<!DOCTYPE html>
<html>
<head>
<title>D3.js Folder Tree</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<svg id="folderTree" width="800" height="600"></svg>
<script>
// 폴더 트리 데이터
const folderTreeData = {
name: "root",
children: [
{
name: "folder1",
children: [
{ name: "file1" },
{ name: "file2" }
]
},
{
name: "folder2",
children: [
{ name: "file3" },
{ name: "file4" },
{
name: "folder3",
children: [
{ name: "file5" }
]
}
]
}
]
};
// SVG 컨테이너 선택
const svg = d3.select("#folderTree");
// 트리 레이아웃 생성
const treeLayout = d3.tree().size([700, 500]);
// 트리 레이아웃에 데이터 바인딩
const root = d3.hierarchy(folderTreeData);
const treeData = treeLayout(root);
// 노드와 링크 그리기
const nodes = svg.selectAll(".node")
.data(treeData.descendants())
.enter()
.append("circle")
.attr("class", "node")
.attr("r", 10)
.attr("cx", d => d.y)
.attr("cy", d => d.x);
const links = svg.selectAll(".link")
.data(treeData.links())
.enter()
.append("line")
.attr("class", "link")
.attr("x1", d => d.source.y)
.attr("y1", d => d.source.x)
.attr("x2", d => d.target.y)
.attr("y2", d => d.target.x);
</script>
</body>
</html>
결과 확인하기
위의 예제 코드를 HTML 파일에 복사하여 실행하면, 폴더 트리가 그려진 SVG 그래픽이 표시됩니다. 각각의 노드는 원으로 표시되고, 링크로 연결된 관계를 확인할 수 있습니다.
이처럼 D3.js를 사용하여 폴더 트리를 그려볼 수 있습니다. D3.js는 다양한 기능과 설정을 제공하므로, 필요에 따라 추가적인 스타일링이나 인터랙션을 구현할 수 있습니다.