실직한김에만들어보자 - 6일차

#실직한김에만들어보자 시리즈

일이 좀 있어서 공백이 길었다... 다시 시작해보자!

 

 

- 기록 1

연도별 조직도를 만들기 위해 어떤 라이브러리를 써야할 지 책찌피티에게 물어보았다.

5가지를 소개 해 주었고, 그 중 무료 상업적 사용이 가능한 3가지 중 'D3.js' 를 사용해보고자 했다.

D3 by Observable | The JavaScript library for bespoke data visualization

D3.js에서 조직도에 적합한 것은 Tree 또는 Cluster 차트라서 이미지를 보는데...

출처: D3 gallery

생각한 그 조직도의 이미지가 아니었다.

D3에서 제공하는 예시 이미지 갤러리를 보아도 마음에 드는 것이 없어 다른 라이브러리로 바꾸기로 했다.

 

그렇다면 이번엔 OrgChart!

GitHub - dabeng/OrgChart: It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn t

따로 홈페이지는 없고, github에서 제공하는 형식이다.

출처: OrgChart Github

 

직관적이여서 좋은 것 같다, 적용해보자.

ES6 메뉴가 있어서 듀토리얼을 보는데, 2016년도에 지원이 종료된 것 같아 이상해서 조금 더 찾아보니 balkan이라는 회사에서 orgchart를 관리하고 있고, repo가 별도로 존재했다..

https://github.com/BALKANGraph/OrgChartJS

GitHub - BALKANGraph/OrgChartJS: OrgChart JS is a simple, flexible and highly customizable organization chart plugin for present

 

js 파일 다운로드 후 예제 코드를 적용해보면, 아래와 같이 출력된다.

잘 나오는 듯 했는데...?

 

여러명의, 특히 회원들을 수십명 표현하려고 하니 위 이미지처럼 아래로만 나열되는 문제가 있었다.

 

맞추고 싶은 몇 행, 몇 열 이 존재했는데, 이렇게 출력되니 당황스럽기만 할 뿐...

그래서 일단 보여주는건 나중에 추가해도 되는 부분이니 깔끔하게 리스트로 수정해서 출력해주고자 한다.