저는 졸업 후 현재 근무하고 있는 회사에서 인턴으로 일하고 있습니다. 부서장님께서 저에게 구성 가능한 시각적 반응 구성 요소를 작성해 달라고 요청하셨는데, 이것이 무엇인지 잘 모르겠습니다. 현재는 echarts와 비슷한 구성형 리액트 컴포넌트를 만들기 위해 Three.js를 핵심으로 사용하고 있는데, 며칠간 계속 쓰고 삭제하고 하는 중입니다. 코드 삭제 구성 가능성에 대한 이해가 명확하지 않습니다.
三叔2017-06-12 09:33:52
간단히 말하면 시각화를 위한 가장 일반적인 매체는 캔버스(예: echart), svg(예: d3) 또는 WebGL(예: Three.js) 기반인지 여부에 관계없이 그래픽 차트를 만드는 주요 작업입니다. 차트는 적절한 데이터를 전달하는 것입니다.
React의 경우 당연히 다양한 차트 유형을 구성 요소로 캡슐화하여 사용해야 하며 구성 요소는 모두 상태 중심이므로 전달된 상태 변경으로 인해 구성 요소가 다시 렌더링될 수 있으며 시각적 성능은 소위 "실시간 업데이트"입니다.
따라서 "구성 가능"은 데이터와 매개변수를 구성 요소에 하드 코딩할 수 없다는 의미이지만 매개변수 전달을 통해 이러한 차트 구성 요소를 렌더링하도록 구성 요소를 합리적으로 설계할 수 있다는 의미입니다. 원하는 효과는 구성 요소의 내부 구현(차트 조립 및 렌더링 프로세스)이 숨겨지고 구성 요소의 구체적인 표시를 결정하는 데이터가 매개 변수를 통해 전달될 수 있어 더 높은 확장성, 유지 관리성 및 가독성, 재사용성을 얻을 수 있다는 것입니다. , 등.
이 아이디어를 따르면 문제가 없지만 중간에 다루어야 할 세부 사항이 많을 것이며 디자인 능력도 테스트하게 될 것입니다. (즉, 코드 및 인터페이스 디자인을 의미합니다) 가장 간단한 것부터 시작하겠습니다. 시리즈 데이터, x/y축, 라벨, 단위, 스케일, 범례 등과 같은 가장 기본적인 막대/기둥형 차트는 매개변수를 통해 전달될 수 있으며, 구성요소는 자동으로 업데이트됩니다. 매개변수가 변경됩니다.
