2 augusti, 2019 Inopto_AB

gojs 예제

다이어그램의 기초는 다이어그램이 작동할 수 있는 데이터 모델을 만드는 것입니다. 이 모델은 두 개의 테이블인 노드DataArray(노드 데이터)와 linkDataArray(가장자리 데이터)로 구성됩니다. 노드는 객체를 그래픽으로 나타내는 다이어그램의 주요 요소입니다(예: 엔터티 관계 다이어그램의 엔터티). 링크(가장자리)는 다이어그램 유형에 따라 다른 의미(예: ERD 다이어그램의 엔터티 간의 관계)가 있을 수 있는 노드(방향 여부)간의 연결입니다. 다음은 모델 및 다이어그램의 예이며, 그 다음에 생성되는 실제 다이어그램은 개별 노드를 필수 필드만 키인 객체(예: 고유 식별자)로 정의합니다. 또한 선택적으로 개체 범주를 정의하고 다이어그램의 노드와 함께 저장될 모든 데이터로 개체범주를 완료할 수 있습니다. 가장자리는 또한 두 개의 필수 필드가 있는 개체로 정의되며, 그 값에 연결된 노드가 결정됩니다. 노드의 경우와 마찬가지로 자체 추가 데이터도 추가할 수 있습니다. 다이어그램 모델은 다이어그램 개체의 모델 필드 아래에 있습니다.

이동을 만들어 정의하는 것이 가장 좋습니다. 그래프링크스모델 오브젝트는 노드와 가장자리를 전달합니다. 다음은 모델 정의의 모양의 예입니다: GraphLinksModel에서 모델.nodeDataArray 외에 model.linkDataArray가 있습니다. 각 JavaScript 개체의 배열을 보유 하며 각 ”받는 번째” 및 ”에서” 노드 키를 지정 하 여 링크를 설명 합니다. 다음은 노드 A가 노드 B에 연결되고 노드 B가 노드 C에 연결되는 경우의 예입니다: 개체의 모양을 정의하는 또 다른 방법은 여러 개의 다른 셰이프를 하나로 결합하는 것입니다. 이 방법의 장점은 개체를 여러 개의 작은 개체로 나눈 후 각 부분에 대해 서로 다른 동작을 정의할 수 있다는 것입니다(예: 셰이프 중 하나는 클릭 동작을 정의하는 단추일 수 있습니다.이 경우 이 조각만 이 이브를 갖게 됩니다. nt 할당). 복잡한 개체를 만들려면 개체에 모양을 배열하는 방법에 대해 알아보는 것이 좋습니다.

우리는 중간에 모든 것을 배치하는 것을 의미 자동을 사용했습니다. 우리는 또한 다른 옵션이 있습니다, 그 중 가장 기본적인 포함: 수평 (왼쪽에서 오른쪽으로), 수직 (위에서 아래로), 스팟 (센터, 상단, 아래쪽 등과 같은 미리 결정 된 위치에 배치).

Kontakta oss!