D3.js

Data-Driven Documents(D3)는 웹 브라우저에서 동적인 대화형 데이터 시각화를 생성하기 위한 JavaScript 라이브러리입니다. D3는 이를 수행하기 위해 HTML, SVG 및 CSS를 사용합니다. D3는 요소를 선택하고, SVG 개체를 만들고, 스타일을 지정하고, 전환, 동적 효과 또는 도구 설명을 추가하는 기능을 사용하여 개념을 기반으로 합니다. D3.js 함수를 사용하여 큰 데이터 세트를 SVG 개체에 바인딩하여 텍스트/그래픽 차트 및 다이어그램을 생성할 수 있습니다.

주요 특징

선택

D3에는 필요한 DOM 요소를 선택하는 두 가지 간단한 기능이 있습니다. selectAll 및 select . Selections 메소드는 div 요소의 경우 div, 클래스 이름이 "container"인 요소의 경우 .container 또는 ID가 "submit"인 요소의 경우 #submit와 같은 인수로 문자열을 허용합니다. selectAll는 지정된 요소의 모든 일치 항목을 반환하는 반면 select는 문서의 첫 번째 요소만 반환합니다. 예를 들어, 모든 단락 요소를 빨간색 글꼴로 변경하려면 다음을 사용하십시오.

d3.selectAll(‘p’).style(‘color’, ‘red’);

첫 번째 단락 태그만 선택하고 빨간색으로 바꾸려면 다음을 사용합니다.

d3.select(‘p’).style(‘color’, ‘red’);

선택 항목을 연결하여 요소의 하위 항목을 선택할 수도 있습니다. 예를 들어 단락의 첫 번째 굵은 요소를 반환하려면 다음을 수행합니다.

d3.select(‘p’).select(‘b’);

동적 속성

jQuery와 같은 다른 DOM 프레임워크와 달리 D3는 스타일, 속성 및 기타 유사한 속성을 단순한 상수가 아닌 데이터의 함수로 취급합니다. 예를 들어 단락에 무작위로 색상을 지정하려면 다음을 수행합니다.

d3.selectAll(‘p’).style(‘color’, function() {
  return ‘hsl(‘ + Math.random() * 360 + ‘,100%,50%)’;
});

또는 짝수 또는 홀수 div에 대한 대체 색상:

d3.selectAll(‘div’).style(‘background-color’, function(d, i) {
  return i % 2 === 0 ‘#fff’ : ‘#eee’;
});

이러한 콜백 함수는 종종 바인딩된 데이터를 참조합니다. 이 데이터를 각 값이 선택 함수에 인수d로 전달된 배열로 지정할 수 있습니다. 그런 다음 인덱스를 일치시켜 데이터를 올바른 노드와 일치시킵니다. 첫 번째 데이터 포인트가 있는 첫 번째 노드, 두 번째 데이터 포인트가 있는 두 번째 노드 등입니다. 예를 들어, 숫자 배열이 주어지면 이 숫자를 다음과 같이 단락의 글꼴 크기로 사용할 수 있습니다.

const fontSizes = [4, 8, 15, 16, 23, 42];
d3.selectAll(‘p’)
  .data(fontSizes)
    .style(‘font-size’, (d) => `${d}px`);

입장 및 퇴장

앞서 우리는 데이터와 노드가 인덱스에 따라 일치한다고 말했습니다. 그러나 하나의 요소가 다른 요소보다 더 많다면 어떻게 될까요? enter 및 exit 함수가 이를 처리합니다. 이전 예를 사용하면 fontSizes 배열에 6개의 숫자가 있습니다. 단락 노드가 5개만 있으면 마지막 숫자 42는 갈 곳이 없습니다. enter를 사용하면 추가 데이터를 사용할 새 노드가 생성됩니다.

d3.selectAll(‘p’)
  .data(fontSizes)
    .enter().append(‘p’)
      .style(‘font-size’, (d) => `${d}px`);

exit 반대 효과가 있습니다. 데이터가 없는 불필요한 노드를 제거합니다.

전환

전환은 시간이 지남에 따라 스타일과 속성을 점진적으로 통합합니다. 예를 들어, 페이지의 배경을 검은색으로 흐리게 하려면:

d3.select(‘body’).transition().
  .style(‘background-color’, ‘black’);

또는 시차 지연을 사용하여 심볼 맵에서 원의 크기를 조정하려면 다음을 수행합니다.

d3.selectAll(‘circle’).transition()
  .duration(750)
  .delay((d, i) => i * 10;
  .attr(‘r’, (d) =>  Math.sqrt(d * scale)});

실제로 변경되는 속성을 수정함으로써 D3는 오버헤드를 줄이고 높은 프레임 속도에서 더 큰 그래픽 복잡성을 허용합니다.

결론

이것들은 D3.js에서 가장 많이 사용되는 기능 중 일부일 뿐입니다. 기타에는 각 애니메이션이 언제, 얼마나 오래 발생할 것인지를 관리하기 위한 타이머, 차트 및 그래프에 사용되는 고유한 요소를 생성하기 위한 모양, 마우스 또는 터치패드를 사용하여 이동 및 확대/축소하기 위한 확대/축소가 포함됩니다. 모든 종류의 기술을 사용하여 놀라운 예를 많이 볼 수 있습니다here.