TypeScript 샘플 3 시도
입문
D3.js는 입력 데이터에 따라 브라우저에 도표 등 도표를 출력하는 라이브러리입니다.예시된 비망록을 발표하다.
전제 조건
Visual Studio Code 설치됨
Node.js/npm 설치됨
샘플 d3
컴파일러 상태와 성능 그래프를 브라우저에 출력하는 예시입니다.
파일 구성
경로
파일 이름
설명
.
data.js
data.ts 컴파일에서 만든 JavaScript 파일
.
data.js.map
data.ts에서 만든 맵 파일 컴파일하기
.
data.ts
브라우저에 출력할 차트 정의 유형 스크립트
.
perf.html
브라우저 출력용 html
.
README.md
이 예제의 설명과 사용 방법
.
tsconfig.json
유형 스크립트 컴파일 프로필
클래스 및 객체 맵
실행
cd ./d3
tsc --sourcemap data.ts
perf.htmlをエディターで表示 Ctrl+F1 결과
득점
data.ts 모듈 chart에서 드로잉을 정의하고 드로잉의 각 변수의 값을 설정하면 Document.addEventListener에서 드로잉을 수행합니다.
브라우저에 표시된perf입니다.html 중 d3.vs.js를 호출하여 d3 라이브러리를 불러온 후 데이터를 컴파일했습니다.js를 불러오고 그래프를 브라우저에 출력합니다.
perf.발췌하다
<!doctype html>
<html>
<head>
<script src="http://d3js.org/d3.v2.js"></script>
<script src="data.js"></script>
공책
d3.js의 기본 구조를 기록하세요.
차트를 내보내려면 차트의 드로잉 정의(chart), 드로잉의 값 정의(plot), 브라우저 출력(document) 등 세 가지 정의가 필요합니다.
그리고 브라우저에서 출력한 html에서 d3.js 및 TypeScript 컴파일된 js를 로드합니다.
총결산
도표는 시각화된 숫자의 프레젠테이션에 필요한 항목이다.
이 견본을 통해 알 수 있듯이 도표는 상당히 큰 프로그래밍이 필요하다.일반적인 도표를 만드는 패턴 클래스, 외부 파일에서 값을 입력하는 등 표준화를 통해 프로그래밍 시간을 줄일 수 있다.JavaScript가 구현할 수 없는 클래스를 TypeScript로 인코딩하여 d3 라이브러리를 효과적으로 활용할 수 있습니다.
이상
Reference
이 문제에 관하여(TypeScript 샘플 3 시도), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/pooshikin/items/68a5a3c7a3c98768a52a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
