React, SVG 및 CSS 레이아웃을 사용하여 다이어그램 만들기

Kenneth블로그이미지
이 문서에서는 다음을 사용하여 다이어그램을 만드는 과정을 보여줍니다. 반응, SVG, 그리고 페이스북의 CSS 레이아웃 도서관. ~에 Rescale, 우리는 고객이 컴퓨팅 노드와 온프레미스 라이선스 서버 간의 통신을 위해 라이선스 프록시 서버를 설정할 수 있는 웹 UI를 제공합니다. 다이어그램은 이러한 서버가 서로 통신하는 방식을 사용자에게 보여주는 좋은 방법입니다.
다음은 이 기술을 사용하여 만든 다이어그램의 예입니다. 컨트롤은 상태가 변경될 때 React가 다이어그램을 다시 렌더링할 수 있다는 것을 보여주기 위한 것입니다.
BbGuHsj
SVG는 DOM의 일부이기 때문에 React 내에서 다이어그램을 만드는 데 좋은 선택입니다. 그러나 SVG 요소의 레이아웃은 SVG가 자체 좌표계를 사용하기 때문에 HTML과 함께 CSS를 사용하는 것만큼 간단하지 않습니다. 페이스북이 있는 곳이에요 CSS 레이아웃 들어옵니다. CSS를 사용할 수 있습니다. 플렉스 박스 SVG 요소를 배치하는 모델입니다.
React, SVG 및 CSS 레이아웃을 사용하면 다음을 수행할 수 있습니다.

  • 구성 요소의 props 또는 상태 변경으로 인해 다이어그램을 동적으로 변경합니다.
  • 요구 사항 변경 시 빠르게 반복
  • UI를 현지화하는 기존 방법을 사용하여 다른 언어로 현지화

와이어 프레임

다이어그램 생성을 시작하려면 CSS 레이아웃에 작성된 기본 스타일로 HTML을 사용하여 다이어그램을 와이어프레임합니다. README:

div, span { 상자 크기: 테두리 상자; 위치: 상대; 디스플레이: 플렉스; 플렉스 방향: 열; 항목 정렬: 늘이기; 플렉스 축소: 0; 콘텐츠 정렬: flex-start; 테두리: 0 단색 검정색; 여백: 0; 패딩: 0; }

HTML 다이어그램의 와이어프레임은 다음과 같습니다.

Rescale
계산
라이선스 프록시
전제에
라이센스 서버 1
라이센스 서버 2
 

이것은 다음을 생성합니다.
JvRDq5B
경계를 표시하기 위해 각 div에 테두리가 추가되었습니다. 명심해야 할 몇 가지 사항:

  • CSS 레이아웃만 사용해야 합니다. 지원되는 속성.
  • SVG에서 텍스트 위치 지정은 여전히 ​​다소 수동 프로세스이며, 특히 수직 중심 지정은 더욱 그렇습니다.

와이어프레임에서 CSS 레이아웃 트리 만들기

CSS 레이아웃에서 노드는 다음과 같은 객체일 뿐입니다. { 스타일: { … }, 하위: [ 노드 ] }. 루트 노드는 트리로 간주됩니다. 달리기 컴퓨팅레이아웃() 트리에서는 너비, 높이, 위쪽, 왼쪽, 오른쪽 및 아래쪽을 포함하는 레이아웃 개체로 모든 노드를 채웁니다. 이것이 SVG 요소의 위치를 ​​지정하는 데 사용되는 것입니다.
와이어프레임에서 트리를 생성하는 것은 HTML과 ID를 간단히 읽는 것뿐입니다.우리가 접근할 수 있도록 각 노드에 s가 제공됩니다. 레이아웃 ID별 각 노드의 속성 나중에.

const ComputeLayout = require('css-layout'); const range = require('lodash/유틸리티/범위'); 함수 em(n) { 반환 n * 12; } const numServers = 2; const nodeTree = { id: 'root', style: { alignItems: 'center' }, children: [ { id: 'rescaleBox', style: { padding: em(1), width: em(12) }, children: [ { id: 'rescaleLabel', 스타일: { height: em(1) } }, { id: 'computeNodes', 스타일: { height: em(3), marginBottom: em(2), marginTop: em(1) }, }, { id: 'licenseProxy', 스타일: { height: em(3) } }, ], }, { id: 'onPremiseBox', 스타일: { marginTop: em(3), }, 어린이: [ { id: 'onPremiseLabel', 스타일: { height: em(1), margin: em(1) } }, { id: 'onPremiseServers', style: { flexDirection: 'row', marginBottom: em(1), paddingLeft: em(0.5), paddingRight: em(0.5), }, children: range(0, numServers).map(i => { return { id: `server${i}`, style: { height: em(6) , marginLeft: em(0.5), marginRight: em(0.5), 너비: em(8), }, }; }), }, ], }, ], }; ComputeLayout(nodeTree);

React를 사용한 렌더링

각 노드에는 레이아웃 재산. 이것들을 만드는 것 레이아웃 다음으로 액세스할 수 있는 객체 id 매우 간단합니다.

function createLayoutMap(obj, map={}) { if (obj.id) { map[obj.id] = obj.layout; } if (obj.children) { for (let i = 0; i < obj.children.length; i++) { createLayoutMap(obj.children[i], map); } } 지도 반환; } const l = createLayoutMap(nodeTree);

XNUMXD덴탈의 l 객체에는 각 노드에 제공된 ID로 액세스할 수 있는 모든 레이아웃 정보가 포함되어 있습니다. 이를 통해 이제 다음의 조합을 사용할 수 있습니다. , React에서 다이어그램을 렌더링하려면:

render() { // ... 위의 다른 모든 항목 ... const l = createLayoutMap(nodeTree); return ( {gettext('Rescale')} {gettext('Compute Nodes')} {gettext('License Proxy')} {licenseProxyIp} // ... 등등, 나머지는 독자를 위한 연습으로 남습니다. ); }

보다시피, 우리는 레이아웃 요소를 배치하거나 너비와 높이를 설정하기 위해 CSS 레이아웃으로 계산된 속성입니다. 참고 사항:

  • XNUMXD덴탈의 상단, 연락해주세요, 바닥왼쪽 (left) 속성 레이아웃 객체는 상위 노드를 기준으로 합니다. SVG에서는 다음을 사용합니다. 그래서 각 아이들은 요소는 해당 변환을 기준으로 배치됩니다.
  • 텍스트 위치 지정은 위에서 언급한 것처럼 다소 수동적입니다. 그만큼 텍스트 앵커 속성은 수평 센터링을 처리할 수 있지만 dy 수직 센터링을 처리하기 위한 몇 가지 마법의 숫자가 있는 속성입니다.

이 기술은 이것에서 영감을 얻었습니다. 블로그 게시물 CSS 레이아웃을 사용하여 D3 차트를 배치합니다.

비슷한 게시물