JS-Tree 소개 (mitchTree.boxedTree)

UI 에서 계층관계를 보여주기에 좋은 라이브러리가 있어서 정리하고자 포스팅한다.

 

JS-Tree 이고 공식 사이트는 아래와 같다.

https://www.reddit.com/r/javaScriptStudyGroup/comments/txgrdk/d3jstree_does_not_work_in_vertical_orientation/

From the javaScriptStudyGroup community on Reddit: D3.JS-Tree does not work in vertical orientation

https://d3-mitch-tree.netlify.app/manual/usage

Manual | d3-mitch-tree

 

사용하면 아래 그림처럼 이쁘게 보여질 수 있다.

 

 

JavaScript 기준 사용법은 아래와 같다.

기타 사용하는 프레임워크나 버전에 따라 조금씩 상이할 수 있으니 위 사이트 들어가서 참고 바란다.

var treePlugin = new d3.mitchTree.boxedTree()      .setIsFlatData(true)      .setData(data)      .setElement(document.getElementById("visualisation"))      .setIdAccessor(function (data) {          return data.id;      })      .setParentIdAccessor(function (data) {          return data.parentId;      })      .setBodyDisplayTextAccessor(function (data) {          return data.title+"안에 내용";      })      .setTitleDisplayTextAccessor(function (data) {          return data.title+"상단 내용";      })      .on("nodeClick", function (data, index, arr) {          //ㅇㅇ      })      .initialize();

몇가지 속성에 대한 설명은 아래와 같다.

 

• 1. setIdAccessor
  .setIdAccessor(function (data) {
      return data.id;
  })
  역할: 각 데이터 노드의 고유 식별자를 정의
  입력: 노드에 대한 데이터 객체 (data).
  출력: 해당 노드의 고유 식별자 (예: data.id).
  설명: 트리에서 각 노드를 구분하기 위해 사용됩니다. ID는 트리 구조에서 노드를 식별하고, 노드 간의 관계를 정의하는 데 필요
  
  
  
• 2. setParentIdAccessor
  .setParentIdAccessor(function (data) {
      return data.parentId;
  })
  역할: 각 데이터 노드의 부모 노드를 지정하는 ID를 정의
  입력: 노드에 대한 데이터 객체 (data).
  출력: 해당 노드의 부모 노드 ID (예: data.parentId).
  설명: 이 메소드는 트리의 계층 구조를 형성하는 데 필수적입니다. 노드의 부모 ID를 기반으로 트리가 생성 됨
  
  
  
• 3. setBodyDisplayTextAccessor
  .setBodyDisplayTextAccessor(function (data) {
      return data.title + "A";
  })
  역할: 트리에서 각 노드의 본문(display) 텍스트를 설정
  입력: 노드에 대한 데이터 객체 (data).
  출력: 노드의 본문에 표시될 텍스트 (예: data.title + "A").
  설명: 이 메소드는 사용자가 트리를 시각적으로 이해할 수 있도록 각 노드에 표시될 내용을 정의합니다. 본문 텍스트는 추가 정보나 설명을 포함할 수 있음
  
  
  
• 4. setTitleDisplayTextAccessor
  .setTitleDisplayTextAccessor(function (data) {
      return data.title + "B";
  })
  역할: 트리에서 각 노드의 제목(title) 텍스트를 설정
  입력: 노드에 대한 데이터 객체 (data).
  출력: 노드의 제목에 표시될 텍스트 (예: data.title + "B").
  설명: 이 메소드는 각 노드의 주요 제목을 설정하여 사용자가 시각적으로 인식할 수 있도록 도와줍니다. 제목은 주로 사용자가 노드의 주요 정보를 파악할 수 있게 해주는 역할