React, D3 및 PixiJS를 사용한 힘줄 작성

몇 달 전에 나는 어떻게 하는지에 관한 한 편을 발표했다.하지만 데이터 원본이 크다면?당신은 D3를 사용할 수 있습니까 아니면 다른 해결 방안을 사용할 수 있습니까?
이 글은 D3과 Pixij를 결합시켜 거의 같은 역도를 만드는 방법을 설명하지만, 다른 방식으로 하면 더 큰 데이터 원본을 지원할 수 있습니다.
우리가 만든 응용 프로그램에서 우리는 매우 고통스러운 성능 문제에 직면해 있다.D3는 화면에 표시해야 할 관련 역도를 만드는 데 도움을 주었지만 우리가 사용하는 데이터 원본은 매우 커졌다.D3을 사용할 때 아래의 도형 표시는 SVG를 사용하여 만든 것으로 데이터 원본이 커질 때 SVG 요소의 수가 증가한다는 것을 의미한다.SVG 요소가 많을수록 애플리케이션의 성능이 저하됩니다.
그렇다면, 우리는 어떻게 이 문제를 해결합니까?D3 SVG 표시를 캔버스 표시로 변환할 수 있다면?그게 도움이 될까요?
우리 프로그램에서 이것은 매우 도움이 된다.

작은 엘프 입력

PixiJS는 HTML5 캔버스 요소 위에서 작업하는 유연한 2D WebGL 렌더링 라이브러리입니다.
주의 - 나는 이 문장에서 PixiJS의 기본 원리를 토론하지 않을 것이며, 나는 네가 그것website에 가서 더욱 읽도록 격려한다.
전반적으로 말하자면, 내가 한 일은 D3 역도 시뮬레이션을 사용하여 역도 시뮬레이션을 유지하고, PixiJS가 캔버스 요소의 맨 위에 있는 모든 렌더링을 처리하도록 하는 것이다.

예제 응용 프로그램 만들기

""게시물에 만든 프로그램을 재구성할 것입니다.이것은 만약 당신이 아직 이 글을 읽지 않았다면, 이 글을 계속 읽기 전에 계속 읽어 주십시오.
먼저 PixiJS 라이브러리를 설치해야 합니다.명령줄에서 다음 코드를 실행하여 PixiJS 및 PixiJS Viewport를 설치하면 확대 및 축소 등의 기능을 지원할 수 있습니다.

npm i pixi.js pixi-viewport

이 라이브러리를 설치한 후에 우리는 시작할 수 있다.
나는 이전 글에서 만든ForceGraph 구성 요소 용기를 사용할 것이지만, 이번에는 runForceGraph 함수가 아니라runForceGraph 함수를 사용할 것이다.runForceGraphPixi는 새로운 역도를 만들고 실행하는 것을 책임집니다.

힘줄 생성기 구축

그림 생성기는 그림을 만드는 함수를 담당할 것이다.다음은 div가 포함된 함수에 대한 선언, 링크 및 노드의 데이터를 가져오고 노드 툴팁을 생성하는 함수입니다.

보시다시피 저는 D3과 PixiJS를 동시에 가져왔습니다. 사용한 서명은 제가 이전 글의runForceGraph에서 사용한 서명과 같습니다.이제 이 함수를 실현합시다

첫 번째 줄 코드는 데이터를 복제하고 용기의 폭과 높이를 가져오는 데 사용됩니다:

변수를 추가했습니다. 나중에 노드의 드래그를 제어하고, 용기 이전에 생성된 HTML 내용에서 용기를 제거합니다.

그리고 몇 가지 보조 함수를 추가합시다:

조수 기능은 도구 알림을 추가하고 노드의 착색을 지원하며 드래그 기능을 만들 수 있습니다

현재 노드와 링크를 만들고 아날로그 역도를 만드는 코드를 추가했습니다:

Pixi 두 개를 추가했습니다.적용 및 d3.힘 시뮬레이션.PixiJS 응용 프로그램은 D3에 의해 공개된 힘 시뮬레이션에 따라 그래픽 렌더링을 담당합니다

도표가 준비되었을 때, 우리는 체크 표시가 발생할 때 발생하는 일을 처리하기 위해 몇 개의 이벤트 처리 프로그램을 추가할 것입니다:

체크 이벤트에서 모든 링크를 정리한 다음 캔버스에 다시 그립니다

마지막이지만 가장 중요하지 않은 것은 도형 용기가 도형을 마운트 해제할 때 사용할 소각 함수를 되돌려줍니다:

전체 함수 소스 코드:

이제 모든 것이 준비되었습니다. 이 프로그램을 실행할 수 있습니다. 당신의 기이한 힘을 보십시오

Summary

본문에서, 나는 당신에게 React, D3, PixiJS 라이브러리를 사용하여 역도 구성 요소를 만드는 방법을 보여 줍니다.그래픽 코드here를 찾을 수 있습니다