d3.js
d3의 경우 강력하고 반응성 있으며 재사용 가능 (r3)

소개

산포도

이 예제에는 총 1000 줄 이상의 코드가 포함되어 있습니다 (여기에 너무 많이 포함됨). 이러한 이유로 모든 코드는 http://blockbuilder.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2 ( https://bl.ocks.org/SumNeuron/956772481d4e625eec9a59fdb9fbe5b2 에서 호스팅 됨)에서 액세스 할 수 있습니다. bl.ocks.org는 iframe을 사용하므로 크기 조정을 보려면 버튼을 클릭해야합니다 (iframe의 오른쪽 아래 모서리). 코드가 많으므로 여러 파일로 나뉘며 관련 코드 세그먼트는 파일 이름과 줄 번호로 참조됩니다. 우리가 그것을 통과 할 때이 예를여십시오.

차트를 만드는 이유는 무엇입니까?

완전한 차트로 들어가는 몇 가지 핵심 구성 요소가 있습니다. 즉 다음과 같습니다.

• 표제
• 축
• 축 레이블
• 자료

차트에 따라 포함될 수있는 다른 측면이 있습니다 (예 : 차트 범례). 그러나 이러한 요소 중 많은 부분은 툴팁으로 회피 될 수 있습니다. 이러한 이유로 대화 형 차트의 특정 요소 (예 : 데이터 사이를 전환하는 단추)가 있습니다.

차트의 내용이 대화 형이므로 차트 자체가 동적 인 것이 적절합니다. 예를 들어 창의 크기가 변경되면 크기를 조정할 수 있습니다. SVG는 확장 가능하므로 현재 관점을 유지하면서 차트의 크기를 조정할 수 있습니다. 그러나 설정된 원근감에 따라 차트가 너무 작아서 차트에 충분한 공간 (예 : 너비가 높이보다 큰 경우)이 있더라도 읽을 수 없게 될 수 있습니다. 따라서 차트를 나머지 크기로 다시 그리는 것이 더 바람직 할 수 있습니다.

이 예제에서는 버튼, 제목, 축, 축 레이블의 배치를 동적으로 계산하는 방법과 다양한 데이터 양의 데이터 세트를 처리하는 방법을 다룹니다

설정

구성

코드 재사용을 목표로하기 때문에 차트의 전역 옵션을 포함하도록 구성 파일을 만들어야합니다. 이러한 구성 파일의 예는 charts_configuration.json 입니다.

이 파일을 보면 차트를 만들 때 이미 명확하게 사용해야하는 몇 가지 요소가 포함되어 있음을 알 수 있습니다.

• 파일 (차트 데이터가 저장된 위치의 문자열 저장)
• document_state (현재 차트에서 선택된 버튼)
• chart_ids (우리가 만들 차트에 대한 html ID)
• svg (svg에 대한 옵션, 예 : 크기)
• plot_attributes
  • title (다양한 글꼴 속성 설정)
  • 툴팁 (다양한 툴팁 스타일 속성 설정)
  • axes (다양한 글꼴 속성 설정)
  • 버튼 (다양한 글꼴 및 스타일 속성 설정)
• 플롯
  • scatter (우리의 scatter plot의 여러 측면을 설정합니다 (예 : point radius)
• 색상 (사용할 특정 색상 표)

도우미 함수

이러한 글로벌 측면을 설정하는 것 외에도 일부 도우미 기능을 정의해야합니다. 이것들은 helpers.js 아래에 helpers.js

• ajax_json (json 파일을 동 기적 또는 비동기 적으로로드)
• keys (주어진 객체의 키를 반환합니다 - d3.keys ()와 같습니다)
• parseNumber (타입이나 수를 모르는 경우의 일반적인 수치 해석)
• typeofNumber (숫자 유형 반환)

index.html

마지막으로 우리는 html 파일을 설정해야합니다. 이 예제의 목적을 위해 차트를 section 태그에 넣을 것입니다. id는 구성 파일에 제공된 id 와 일치합니다 (37 줄). 백분율은 부모 멤버로부터 계산할 수있는 경우에만 작동하므로 일부 기본 스타일 (19 ~ 35 행)

우리의 산점도 만들기

make_scatter_chart.js . 이제 가장 중요한 변수 중 많은 부분이 미리 정의 된 2 번 줄을 자세히 살펴 보겠습니다.

• svg - d3 차트의 svg 선택
• chart_group - d3 데이터가 저장 될 svg 내부의 그룹 선택
• 캔버스 - 편의상 svg 추출의 핵심적인 측면
• 마진 - 고려해야 할 마진
• maxi_draw_space 우리가 데이터를 그릴 수있는 가장 큰 x 및 y 값
• doc_state - 버튼을 사용하는 경우 문서의 현재 상태 (이 예에서는 우리가 사용하고 있음)

당신은 우리가 HTML에 svg를 포함하지 않았다는 것을 알아 차렸을 것입니다. 그러므로 차트를 가지고 무엇이든 할 수 있기 전에 아직 존재하지 않으면 svg를 index.html 에 추가해야합니다. 이것은 make_svg.js 파일의 make_svg.js 함수에 의해 이루어 make_chart_svg . make_svg.js 를 보면 svg 너비와 높이에 대한 차트 구성에서 parseNumber 함수 인 parseNumber 를 사용한다는 것을 알 수 있습니다. 숫자가 float 인 경우 svg의 너비와 높이가 섹션의 너비와 높이에 비례합니다. 숫자가 정수이면 정수로 설정됩니다.

Line 6 - 11은 이것이 첫 번째 호출인지 아닌지를 chart_group 후 chart_group (및 첫 번째 호출 인 경우 문서 상태)을 설정합니다.

라인 14-15는 클릭 된 버튼으로 현재 선택된 데이터를 추출합니다. 16 행은 data_extent 설정합니다. D3는 데이터 범위를 추출하는 기능을 갖고 있지만,이 변수의 데이터 범위를 저장하는 내 환경이다.

27 ~ 38 행은 여백, 버튼, 제목 및 축을 만들어 차트를 설정하는 마법을 포함합니다. 이것들은 모두 동적으로 결정되며 조금 복잡해 보일 수 있으므로 차례대로 살펴 보겠습니다.

make_margins (make_margins.js)

여백 개체는 차트의 왼쪽, 오른쪽, 위쪽 및 아래쪽의 공간 (x.left, x.right, y.top, y.bottom 각각), 제목, 단추 및 축.

축 마진은 21 행에서 업데이트됩니다.

왜 우리가이 일을합니까? 우리가 틱의 수를 지정하지 않으면 틱은 틱 크기를 표시하고 틱 레이블 글꼴 크기는 축이 필요로하는 크기를 계산할 수 없습니다. 그럼에도 불구하고 우리는 진드기 라벨과 진드기 사이의 공간을 추측해야 할 것입니다. 따라서 데이터를 사용하여 더미 축을 만들고, 해당 svg 요소의 크기를 확인한 다음 크기를 반환하는 것이 더 쉽습니다.

실제로는 y 축 너비와 x 축 높이가 필요합니다. 이것은 axes.y 및 axes.x에 저장됩니다.

기본 여백이 설정되면 max_drawing_space (make_margins.js의 29-34 행)

make_buttons (make_buttons.js에 있음)

이 함수는 모든 버튼에 대한 그룹을 만든 다음 각 버튼에 대한 그룹을 만들어서 원과 텍스트 요소를 저장합니다. 37 - 85 행은 버튼의 위치를 ​​계산합니다. 각 버튼 길이의 텍스트 오른쪽이 우리가 입력 할 수있는 공간보다 긴지 확인하여이를 수행합니다 (75 행). 그렇다면 버튼을 한 줄 아래로 내리고 여백을 업데이트합니다.

make_title (make_title.js에 있음)

make_title 은 차트의 제목을 자동으로 여러 줄로 나눠서 필요에 따라 하이픈으로 표시한다는 점에서 make_buttons와 유사합니다. TeX의 하이픈 연결 체계가 정교하지 않기 때문에 조금 해키지만 충분히 잘 작동합니다. 하나 이상의 행이 필요하면 여백이 업데이트됩니다.

버튼, 제목 및 여백이 설정되면 축을 만들 수 있습니다.

make_axes (make_axes.js에 있음)

make_axes의 논리는 더미 축에 필요한 공간을 계산하기위한 것입니다. 그러나 여기서는 축간 전환을위한 추이를 추가합니다.

마지막으로 우리의 산점도

모든 설정이 완료되면 마침내 우리의 산점도를 만들 수 있습니다. 데이터 세트의 점수가 다를 수 있으므로이를 고려하여 d3의 입력 및 종료 이벤트를 적절하게 활용해야합니다. 이미 존재하는 점의 수를 40 행에서 얻습니다. 45 행 ~ 59 행의 if 문은 더 많은 데이터가있는 경우 원 요소를 더 추가하거나 너무 많은 요소가있는 경우 추가 요소를 모서리로 전환 한 다음 제거합니다.

올바른 수의 요소가 있음을 알게되면 나머지 모든 요소를 ​​올바른 위치로 전환 할 수 있습니다 (64 행)

마지막으로 우리는 67 줄과 68 줄에 툴팁을 추가합니다. 툴팁 기능은 make_tooltip.js

박스 및 수염 차트

이전 예제 (make_title, make_axes, make_buttons 등)의 일반화 된 함수를 만드는 가치를 표시하려면이 상자 및 위스커 차트를 고려하십시오. https://bl.ocks.org/SumNeuron/262e37e2f932cf4b693f241c52a410ff

박스와 위스커를 만들기위한 코드가 포인트를 배치하는 것보다 더 집중적 인 반면 동일한 기능이 완벽하게 작동한다는 것을 알 수 있습니다.

막대 차트

https://bl.ocks.org/SumNeuron/7989abb1749fc70b39f7b1e8dd192248