d3 js api functions tutorial with examples
이 자습서에서는 데이터 바인딩, 조인, 데이터로드 및 구문 분석, 보간 등과 같은 기능을 추가하기위한 다양한 D3.js API 함수를 설명합니다.
D3.js는 데이터 바인딩, 조인, CSV, XML 및 JSON 형식의 외부 데이터로드 및 구문 분석, 난수, 보간 및 텍스트 조작과 같은 흥미로운 기능을 추가하는 다양한 API 함수로 구성된 오픈 소스 JavaScript 데이터 시각화 라이브러리입니다. 데이터 시각화를위한 애니메이션, 전환 및 그래프 형성과 같은 다양한 기능과 함께 형식화 및 국제화.
헤더 파일의 함수에 대한 C ++ 정의되지 않은 참조
이에 대한 이전 자습서를 참조 할 수 있습니다. d3 시리즈 기능, 이점 및 전제 조건에 대해 자세히 알아보십시오.
학습 내용 :
D3.js로 데이터 바인딩
차트 및 그래프와 같은 데이터 시각화를 생성하려면 데이터를 DOM 요소와 결합하거나 결합해야합니다.
데이터는 아래와 같이 동일한 유형의 숫자 값을 포함하는 컨테이너 인 배열 일 수 있습니다.
var data = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5)첫 번째 단계는 외부 데이터의 데이터 시각화를 구축하기위한 평면 또는 프레임 워크를 갖기 위해 SVG 객체를 만드는 것입니다. HTML 요소는 d3.select ()로 선택되고 속성을 추가하여 캔버스 역할을하는 SVG를 추가합니다. 캔버스의 너비 및 높이와 같은.
var svg = d3.select(HTML element like body or div) .attr(width, value from variable for width) .attr(height, value from variable for height)다음 단계는 다른 SVG 요소를 포함하는 그룹처럼 작동하는 SVG 요소 'g'를 삽입하는 것입니다.
svg.selectAll ('g')또한 .data (data) 함수를 사용하여 캔버스로 첨부 된이 SVG 모양에 데이터를 바인딩하거나 결합합니다.
svg.selectAll ('g').data(data)다음 단계는 .enter () 메서드를 .data (data) 함수에 사용하여 데이터를 DOM 요소에 바인딩하는 것입니다.
svg.selectAll ('g').data(data).enter()또한 SVG 모양을 추가하여 모양을 캔버스에 첨부 할 수 있습니다.
svg.selectAll ('g') . data(data).enter().append('g')데이터 바인딩의 예는 다음과 같습니다.
var infoset = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5) var span = 500, ceil = 500; var scalespan = d3.scaleLinear() .domain((0, d3.max(infoset))) .range((0, 400)); var screen = d3.select('body').append('svg') .attr('width', span) .attr('height', ceil) .append('g').attr('transform', 'translate(5,20)'); var rule = screen.selectAll('rect') .data(infoset).enter() .append('rect') .attr('width', function(d){ return scalespan(d);}) .attr('height', 20) .attr('y', function(d, i){ return i*25; }) .attr('fill', '#b3ccff'); screen.selectAll('text') .data(infoset).enter().append('text') .attr('y', function(d, i){ return i*25; }) .attr('x', function(d){ return scalespan(d);}) .text(function(d) {return d;}) .attr('fill', 'blue').attr('dy','.85em'); 
우리의 경우에는 대륙 별 인구 밀도 인 데이터를 바인딩하기 위해
var infoset = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5)
가변 화면은 우리의 경우 본문 인 html 요소에 SVG 모양을 첨부하여 그리기 영역에 할당됩니다.
가변 스케일 범위는 그래프를 그래픽 형식으로 스케일에 표시하기 위해 그래프를 플롯하기 위해 도메인 및 범위 매개 변수와 함께 scaleLinear () 함수를 사용합니다.
.data (infoset) .enter ()는 변수 Infoset에 할당 된 데이터 셋을 바인딩하는 데 도움이됩니다.
데이터 세트의 값에 해당하는 서로 다른 길이의 직사각형에 대해 값을 플로팅하기 위해 텍스트가 추가됩니다.
D3.js에서 데이터 결합,로드 및 구문 분석
D3.js는 외부 데이터를로드하거나 다른 유형의 파일에서 변수에 로컬로로드하고이 데이터를 DOM 요소에 바인딩 할 수 있습니다.
데이터 형식은 CSV, JSON, TSV 및 XML이 다른 반면 d3.csv (), d3.JSON (), d3.tsv () 및 d3.xml ()은 서로 다른 데이터 파일을로드하기 위해 제공되는 각각의 메서드입니다. http 요청을 지정된 URL로 전송하여 각 형식의 파일 또는 데이터를로드하고 각 데이터 개체를 구문 분석 한 콜백 함수를 실행하여 외부 소스에서 형식을 지정합니다.
CSV 데이터 파일을로드하는 구문은 다음과 같습니다.
d3.csv (url (, row, callback));#1) 위의 첫 번째 매개 변수 url은 d3.csv 함수가로드 할 외부 파일 인 csv 파일의 URL 또는 서버 경로입니다. 우리의 경우에는
http : // localhost : 8080 / examples / movie_published.csv
#두) 두 번째 매개 변수는 선택 사항입니다.
#삼) 세 번째 매개 변수는 Callback으로, 다른 함수에 의해 인수로 전달 될 수있는 함수로, 파일의 JSON, TSV 및 XML 형식에 대해 다른 코드가 이미 실행을 마칠 때까지 특정 코드가 실행되도록합니다. 함수 d3.csv는 다음과 같습니다. 각각 d3.json, d3.tsv 및 d3.xml로 대체되었습니다.
외부 데이터를 구문 분석하는 예는 다음과 같습니다.
d3.csv('movie_published.csv', function(data) { console.log(data); }); 
Google Chrome 브라우저에서 연 경우 F12를 클릭하면 페이지 새로 고침이 코드에서 콘솔 로그를 표시합니다. 여기서는 console.log (데이터)이며 열 헤드, movie_name 및 year와 함께 데이터 세트의 값을 표시합니다. 서버 위치에 보관 된 CSV 파일에서 표시됩니다.
D3.js에서 난수 조작
d3 – 임의의 API 메서드는 가능한 다른 결과의 발생 가능성을 계산하는 수학 함수 인 다양한 확률 분포에서 난수를 반환합니다.
이 함수는 주로 Math를 사용합니다. 지정된 범위의 최소값과 최대 값 사이에있는 숫자를 생성하는 JavaScript의 임의 함수로, Math가 실행될 때마다 고유 한 숫자가 생성됩니다. 랜덤 함수가 실행됩니다.
- d3.randomUniform – 균일 분포에서 난수를 생성합니다. 예 : d3.randomUniform (1, 2) () – 1을 포함하고 2보다 작은 난수를 반환합니다.
- d3.randomNormal – 정규 분포에서 난수 생성, 예 : d3.randomNormal (1, 2) () – 지정된 최소값과 최대 값 사이에있는 정수를 반환합니다.
- d3.randomLogNormal – 로그 정규 분포에서 난수를 생성하고 예상 값은 랜덤 변수에 대한 자연 로그 값이됩니다.
- d3.randomBates – 독립 변수를 사용하여 Bates 분포에서 난수를 생성합니다.
- d3.randomIrwinHall – Irwin–Hall 분포에서 난수를 생성합니다.
- d3.randomExponential – 지수 분포에서 난수를 생성합니다.
d3의 랜덤 함수 예
Random Functions in d3 Random Functions in d3
document.write(d3.randomUniform(1, 2)() +''); document.write(d3.randomNormal(1, 2)()+'
'); document.write(d3.randomLogNormal(1, 2)()+'
'); document.write(d3.randomBates(1, 2)()+'
'); document.write(d3.randomIrwinHall(1, 2)()+'
'); document.write(d3.randomExponential(1, 2)()+'
');
D3.js의 보간
두 임의 값 사이를 보간하는 데 적용되는 API 메서드는 종료 값 b의 유형에 따라 달라집니다. 일반 구문은 다음과 같습니다. d3. 보간 (a, b). 다음은 끝 값 b의 데이터 유형과 데이터 유형에 따라 변경되는 해당 메소드 또는 함수를 나열한 표입니다.
| 종료 값 유형 b | 사용 된 방법 이름 |
|---|---|
| b가 일반 배열 인 경우 | interpolateArray () |
| b가 부울이면 null 또는 정의되지 않음 | 상수 b가 사용됩니다. |
| b가 숫자 인 경우 | interpolateNumber () |
| b가 색상을 나타내는 색상 또는 문자열 인 경우 | interpolateRgb () |
| b가 날짜 인 경우 | interpolateDate () |
| b가 문자열 인 경우 | interpolateString () |
| b가 형식화 된 숫자 배열 인 경우 | interpolateNumberArray () |
| b가 숫자를 가리키는 경우 | interpolateNumber () |
| 그렇지 않으면 | interpolateObject () |
아래 예는 다음을 설명합니다.
- d3.interpolateNumber () 함수는 시작 값으로 10, 종료 값은 20으로, (0.0)에서 (0.5)까지 (1.0)까지의 보간 매개 변수에 대해 시작 값 10에서 끝 값 20까지 표시되는 값
- (0.0)에서 (0.5)에서 (1.0)까지의 보간 매개 변수에 대해 결과적으로 상응하는 rgb (‘r’,’g’,’b’) 값을 생성하는 두 개의 다른 색상 이름에 대한 d3.interpolateRgb () 함수
- 'yyyy-mm-dd hh : mm : ss'형식의 서로 다른 두 날짜에 대한 d3.interpolateDate () 함수는 (0.0)에서 (1.0)까지의 보간 매개 변수에 대해 위 날짜 범위 사이의 날짜를 표시합니다.
범위 사이의 숫자, 색상 및 날짜에 대한 보간 예는 다음과 같습니다.
Interpolate Numbers, Colors and Dates
var inpolat = d3.interpolateNumber(99,100); document.write(inpolat(0.0) + ''); document.write(inpolat(0.2)+ '
'); document.write(inpolat(0.5) + '
'); document.write(inpolat(1.0)+ '
'); var inpolcolrs = d3.interpolateRgb('yellow', 'aquamarine'); document.write(inpolcolrs(0.0)+ '
'); document.write(inpolcolrs(0.2)+ '
'); document.write(inpolcolrs(0.5)+ '
'); document.write(inpolcolrs(0.8)+ '
'); document.write(inpolcolrs(1.0)+ '
'); var inpoldates = d3.interpolateDate(new Date('2020-01-01 00:00:00'), new Date('2020-01-15 23:59:59')); document.write(inpoldates(0.0)+ '
'); document.write(inpoldates(0.2)+ '
'); document.write(inpoldates(0.5)+ '
'); document.write(inpoldates(0.8)+ '
'); document.write(inpoldates(1.0)+ '
');
D3.js를 사용한 텍스트 서식 및 국제화
텍스트 형식화 및 현지화는 아래 예제와 함께 설명 된 숫자 형식, 날짜 형식 및 로케일 함수를 사용하여 D3.js에서 수행 할 수 있습니다.
D3-로컬 ()
d3.locale (definition)은 정의에 특정한 로케일을 반환합니다. 기본적으로 로케일 정의는 d3.locale (definition)의 경우 미국 영어입니다.
경험이 풍부한 PDF에 대한 오라클 PL SQL 인터뷰 질문 및 답변
로케일 정의에 대한 숫자 형식화 특성은 다음과 같습니다.
- 소수: 소수점은 일반적으로 25.75 ( 예 : '.').
- 수천 : Thousand는 2,475와 같은 1000 개의 값 뒤에 쉼표로 사용되는 식별자 또는 구분 기호입니다 ( 예 : ',').
- 그룹화 : 각 그룹에 대한 배열의 그룹과 크기는 Arrayname (5)를 사용하여 확인할 수 있습니다. 여기서 5는 인덱스이고 배열 크기는 6 개의 멤버입니다.
- 통화: 통화 문자열의 접두사 및 접미사 ( 예 : ( '$', '')).
- 날짜 시간: 날짜 및 시간 (% c) 형식은 날짜 및 시간 ( 예 : '% A % b % e % X % Y').
- 데이트: 날짜 (% x) ( 예 : 월 일 및 연도의 '% m / % d / % Y') 형식 문자열입니다.
- 시각: 시간 (% X) ( 예 : '% H : % M : % S') 형식 문자열 (시간 분 및 초).
- 미문: 로케일의 A.M. 및 P.M. 등가물 ( 예 : ('오전 오후')).
- 일 : 일요일부터 시작하여 알파벳으로 된 요일입니다.
- shortDays : 일요일부터 시작하여 평일의 짧은 요일 또는 약어 (예 : SUN, MON 등).
- 개월 : 월의 전체 이름은 10 월 (1 월부터 시작)입니다.
- shortMonths : 짧은 월 또는 월의 JAN, FEB, MAR 등과 같은 축약 된 이름 (1 월부터 시작).
위에서 설명한 모든 매개 변수는 다음 이미지에서 해당 값과 함께 변수로 표시됩니다.
D3. 형식
JavaScript 라이브러리의 d3.format은 숫자를 입력 인수로 사용하며 구문은 d3.format (specifier)이며 숫자를 변환하기 위해 d3.format이 사용됩니다.
d3 기반 형식 적용 예는 다음과 같습니다.
Formatting for currency body {padding: 50px; font: 16px Courier;} p { color:blue; font-size: 16px; font-weight: bold;} var body = d3.select('body'); var comafmt = d3.format(','), decimalfmt = d3.format('.1f'), comadecimalfmt = d3.format(',.2f'), suffixfmt = d3.format('s'), suffixfmtDecimal1 = d3.format('.1s'), suffixfmtDecimal2 = d3.format('.2s'), rupiemoneyfmt = function(d) { return 'Rs ' + comadecimalfmt(d); }, intmoneyfmt = function(d) { return '$ ' + comadecimalfmt(d); }, euromoneyfmt= function(d) { return '€ ' + comadecimalfmt(d); }, percentfmt = d3.format(',.2%'); var number = 27500; body.append('p').text('Number used for formatting is : ' + number).style('font-weight', 'bold'); body.append('p').text(function() { return 'Indian Rupee format of above Number : ' + rupiemoneyfmt(number); }); body.append('p').text(function() { return 'International Currency format will be : ' + intmoneyfmt(number); }); body.append('p').text(function() { return 'Euro Currency format will be : ' + euromoneyfmt(number); }); body.append('p').text(function() { return 'Percent format : ' + percentfmt(number); }); body.append('p').text(function() { return 'Suffix for large number : ' + suffixfmt(number); }); body.append('p').text(function() { return 'Round off ceil number: ' + suffixfmtDecimal1(number); }); body.append('p').text(function() { return 'Round off floor number : ' + suffixfmtDecimal2(number); }); body.append('p').text(function() { return 'Comma for large number: ' + comafmt(number); }); body.append('p').text(function() { return 'One decimal format : ' + decimalfmt(number); }); body.append('p').text(function() { return 'Two decimal format : ' + comadecimalfmt(number); }); 
D3.js를 사용하여 날짜 형식으로 수정
D3.js 라이브러리를 사용한 시간 형식화. 여기서 d3.timeParse는 와일드 카드 문자 (예 : 입력 시간 형식을 원하는 형식으로 변환하는 데 도움이되는 정규식)와 함께 적용 할 수 있습니다.
시간 및 날짜와 관련된 형식의 예는 다음과 같습니다.
body {font-family: Arial, Helvetica, sans-serif; color: blue;} var datetimefmt = d3.timeFormat('%d-%m-%Y %H:%M:%S %p'); document.write(datetimefmt(new Date()) +''); var timePortion = d3.timeFormat('%H:%M:%S %p'); document.write(timePortion(new Date()) +'
'); var datePortion = d3.timeFormat('%B %d, %Y'); document.write(datePortion(new Date())+'
'); var datefmt = d3.timeFormat(' %d'); document.write(datefmt(new Date())+'
'); var dayfmt = d3.timeFormat('%A '); document.write(dayfmt(new Date())+'
'); var monfmt = d3.timeFormat('%B'); document.write(monfmt(new Date()) +'
');
결론
이 튜토리얼에서는 데이터 바인딩과 같은 D3.js의 나머지 필수 방법을 모두 다루었습니다. 여기서는 데이터를 배열 및 조인,로드 및 구문 분석 형식의 데이터가 CSV, JSON 및 XML 형식으로되어 있습니다.
또한 차트 또는 그래프에서 데이터 그룹을 시각화하고 숫자, 날짜, 시간 및 다른 로케일 통화에 대해 d3.locale 메소드를 사용하여 텍스트 및 현지화 형식을 지정하기 위해 난수 및 보간 방법을 사용한 조작에 대해서도 논의했습니다.
추천 도서
- 자바 스크립트 주입 튜토리얼 : 웹 사이트에서 JS 주입 공격 테스트 및 방지
- 자세한 답변이 포함 된 TOP 45 JavaScript 인터뷰 질문
- 2021 년 최고의 10 가지 API 테스트 도구 (SOAP 및 REST API 테스트 도구)
- API 테스트 자습서 : 초보자를위한 완벽한 가이드
- Rest API 응답 코드 및 Rest 요청 유형
- BDD 접근 방식을 사용하는 Cucumber로 REST API 테스트
- Rest API 튜토리얼 : REST API 아키텍처 및 제약
- 기능 비교가 가능한 최고의 10 가지 최고의 API 관리 도구
- 가장 중요한 20 가지 API 테스트 인터뷰 질문 및 답변