gojs 예제

Posted on

특정 GoJS 메서드 또는 속성의 예제를 찾고 있는 경우 GitHub: 다이어그램 모델은 다이어그램 개체의 모델 필드 아래에 있는 모든 샘플 및 확장 및 설명서의 소스 코드를 검색할 수 있습니다. 이동을 만들어 정의하는 것이 가장 좋습니다. 그래프링크스모델 오브젝트는 노드와 가장자리를 전달합니다. 모델 정의의 모양에 대한 예는 다음과 같습니다: 개별 노드를 고유한 식별자와 같이 필요한 필드만 키인 개체로 정의합니다. 또한 선택적으로 개체 범주를 정의하고 다이어그램의 노드와 함께 저장될 모든 데이터로 개체범주를 완료할 수 있습니다. 가장자리는 또한 두 개의 필수 필드가 있는 개체로 정의되며, 그 값에 연결된 노드가 결정됩니다. 노드의 경우와 마찬가지로 자체 추가 데이터도 추가할 수 있습니다. TreeModel은 GraphLinksModel보다 간단하지만 동일한 두 노드 간의 여러 링크 또는 여러 부모가 있는 것과 같은 임의의 링크 관계를 만들 수 없습니다. 조직 다이어그램은 단순한 계층적 트리와 같은 구조이므로 이 예제에서는 TreeModel을 선택합니다.

우리는 대화형 예제와 함께 GoJS 개념에 대한 포괄적인 API 문서와 심층적인 개요를 제공합니다. 90개 이상의 샘플을 통해 GoJS 속성 및 방법의 수많은 예제를 찾을 수 있습니다. 그러나 다른 유형의 객체를 원한다면 어떻게해야합니까? 이렇게 하려면 노드에 모양을 할당하는 대신Template를 지정하는 대신 맵을 완료합니다. 이 예제에서는 위에 제공된 정의를 범주에 사용한다고 가정해 보겠습니다. 그러나 실용적인 이유로 템플릿을 맵에 직접 할당하지 말고 어떤 범주에 할당할 템플릿을 반환한 다음 맵을 보완하는 함수를 만들어야 합니다. 다이어그램을 모델에 제공하기 전에 이 맵을 완료해야 합니다. 예를 들어, 다음과 같이 보일 수 있습니다(코드의 일부 조각은 명확성을 위해 제외됨): 개체의 모양을 정의하는 또 다른 방법은 여러 모양을 하나로 결합하는 것입니다. 이 방법의 장점은 개체를 여러 개의 작은 개체로 나눈 후 각 부분에 대해 서로 다른 동작을 정의할 수 있다는 것입니다(예: 셰이프 중 하나는 클릭 동작을 정의하는 단추일 수 있습니다.이 경우 이 조각만 이 이브를 갖게 됩니다. nt 할당).

복잡한 개체를 만들려면 개체에 모양을 배열하는 방법에 대해 알아보는 것이 좋습니다. 우리는 중간에 모든 것을 배치하는 것을 의미 자동을 사용했습니다. 우리는 또한 다른 옵션이 있습니다, 그 중 가장 기본적인 포함: 수평 (왼쪽에서 오른쪽으로), 수직 (위에서 아래로), 스팟 (센터, 상단, 아래쪽 등과 같은 미리 결정 된 위치에 배치).