그리드 다이어그램

그리드 다이어그램을 사용하면 구조화된 그리드에 객체를 표시할 수 있습니다.

정보

위 다이어그램의 소스코드는 페이지 하단에 있습니다.

다음 두 개의 키워드만으로 이 모든 걸 할 수 있습니다.

• grid-rows
• grid-columns

grid-rows만 설정했을 경우:

grid-columns만 설정했을 경우:

grid-rows와 grid-columns를 동시에 설정했을 경우:

너비와 높이

독특한 구성을 원한다면 width 또는 height를 사용해 보세요.

각 행 내에서 객체가 어떤 식으로 균등하게 분포되는지 확인해 보세요.

셀 확장

행이나 열 중 하나에 대해서만 너비나 높이를 정의하면 해당 객체가 확장됩니다.

Voters와 Non-voters가 공간을 어떻게 채우는지 확인해보세요.

Dominant direction

행과 열을 모두 적용하면 먼저 정의된 방향을 기준으로 셀이 먼저 채워집니다. 이 방향을 "Dominant direction"이라 합니다.

예시:

grid-rows가 먼저 정의되므로 객체는 가로 방향으로 먼저 채워집니다.

반대의 경우는 다음과 같습니다.

아래와 같이 다른 방향으로 채워질 것입니다.

정보

위의 애니메이션은 D2만으로 구현되었습니다. 즉, 그리드 다이어그램의 구성 과정을 애니메이션화 할 수 있습니다. 이 코드와 함께 animate-interval 플래그를 사용하세요. 이에 대한 자세한 내용은 뒤에 나오는 composition 섹션에서 확인하세요.

그리드 간격 크기 조절

다음 3가지 키워드를 사용하여 그리드의 간격 크기를 제어할 수 있습니다.

• vertical-gap
• horizontal-gap
• grid-gap

grid-gap 설정은 vertical-gap과 ​​horizontal-gap을 동시에 설정하는 것과 같습니다.

vertical-gap 또는 horizontal-gap으로 grid-gap을 재정의할 수 있습니다.

특히 grid-gap: 0은 몇 가지 흥미로운 구성을 만들 수 있습니다.

이를 통해 다음과 같이 일본의 지도도 만들 수 있습니다.

소스 코드

또는 테이블형 데이터에도 저장 가능합니다.

연결

D2의 일반 객체처럼 그리드와 다른 객체를 연결할 수 있습니다. 그리드 내의 객체에 대한 연결은 곧 제공될 예정입니다.

소스 코드

중첩

D2의 현재 버전에서는 그리드 다이어그램 내에 또다른 그리드 다이어그램을 중첩할 수 있습니다. 다른 유형의 중첩도 곧 제공될 예정입니다.

소스 코드

다음은 이 페이지 상단의 이미지에 대한 소스 코드입니다.