Plotable.js를 사용하여 D3에서 빠르게 동적 그래프 작성

무료 D3.js 라이브러리 너를 허용하는 많은 것 중 하나 일 뿐이다. 인터랙티브 그래픽 제작 페이지에. D3가 아마도 가장 많이 사용되는 동안, 그것을 사용하는 법을 배우는 것은 쉬운 일이 아닙니다.

그 이유는 Plottable.js 정말 귀중한 도서관입니다. 무료 오픈 소스 프로젝트 D3.js 위에 구축, 누구나 쉽게 만들 수 있습니다. 대화식 데이터 그래프 처음부터.

이 라이브러리 모든 더러운 일을 처리한다., 그래서 당신은 데이터와 같은 세부 사항에 집중할 수 있습니다. 표식 적절한 코드를 생성한다. 선택하는 차트의 크기와 위치.

각 차트 자체 구성 요소가 있습니다. 당신이 할 수있는 플롯 테이블에서 템플릿 코드 복사 / 붙여 넣기 스스로 차트를 다시 작성하십시오. 이 글을 쓰는 시점에서 다음 중에서 선택할 수 있습니다. 플롯 그래프 스타일 10 개, 막대 그래프, 원형 차트, 분산 형 플롯 및 영역 플롯.

너는 할 수있다. 구성 요소를 개별적으로 다시 빌드하십시오. 과 동적으로 설정을 사용자 정의. 이렇게하면 상호 작용하는 요소, 색상, 애니메이션, 위치 지정, 크기 등 원하는 항목을 쉽게 변경할 수 있습니다..

그만큼 전체 도서관 소스 코드를 검색하고 사본을 다운로드하려는 경우 GitHub에서 사용할 수 있습니다..

그러나, 배우는 가장 좋은 방법은 예를 통해서입니다. 그래서 당신은 그들의 Plottable을 실행하는 샘플 그래프 어떻게 작동하는지보기.

모든 그래프는 완전히 상호 작용하는, 부팅 할 소스 코드. 유사한 그래프를 재 구축하려면 JS 코드를 복사 / 붙여 넣기하고 필요에 따라 다시 포맷하십시오..

나는 그들의 사이트에서 두 개의 개인 즐겨 찾기를 가지고있다 : 캘린더 히트 맵 GitHub의 활동 게시판과 동기화 된 차트 동적 선택 기능 포함.

그 전에 D3.js를 사용한 적이 없다면이 라이브러리를 배우려고 애쓸 것입니다. 특히, TypeScript로 작성, 그래서 당신도 아마 그것을 고르고 싶을 것입니다. 마지막 코드는 다음과 같습니다. ES5 JavaScript로 컴파일, 그래서 그것은해야한다. 모든 주요 브라우저에서 작동.

다이빙을 원한다면 자습서 페이지 편리한 리소스로 가득합니다. Plottable을 시작하기 위해 필요한 모든 것을 배우게됩니다. 동적 웹 기반 그래프 작성 기스로부터.