브라우저에 이분목을 동적으로 표시하려면

웹 응용 프로그램이분수뿐만 아니라 노드와 가장자리가 있는 도표를 표현하려고 할 때도 있다.
이 보도에서vis.js로 제작할 때의 에센스 정리

활동 샘플

이미 jsfiddle에 샘플을 썼어요.
https://jsfiddle.net/seiketkm/fxy5rtkd/
표시된 이분목은 조작(확장, 선택, 이동, 당기기 등)이 매우 재미있다.

프로그램 라이브러리

vis.js의 네트워크 모듈을 사용합니다.
이 보도에는 다른 것들은 모두 사용되지 않았다.

에센스

이분목으로 표시할 때 가장 중요한 것은 표시할 때의 옵션입니다.
문서는 이 일대에 기재되어 있다.
hierarchical에서 다음 두 개를 지정했습니다.

direction

상하 관계를 설정하다.지정한 "UD" 위에 루트 노드를 표시하고, 아래에 나뭇가지를 표시합니다.
지정하지 않으면 확장으로 그려집니다.
참조확장된 드로잉 예

sortMethod

지정"directed"을 통해 모서리(노드 간 연결)의 방향을 기준으로 모/자 관계를 그립니다.
지정하지 않은 경우 "hubsize" 기본값으로 사용되며, 노드 연결의 가장자리 수가 많은 것은 루트 처리가 됩니다.
options

var options = {
    layout: {
        hierarchical: {
            direction: "UD",
            sortMethod: "directed"
        }
    }
};

총결산

vis.js를 사용하여 노드와 가장자리를 가진 도표 구조를 그릴 수 있습니다.
vis.js가 제공하는 도표는 조작감이 상당히 강하다.

다음 일

노드/테두리 작업 시 이벤트를 처리할 예정입니다